React外部div分配了错误的id

Question

我的渲染函数看起来像这样：

render_login: function() {
  return <div>
    <div className='form_container'>
      <div className='logo' />
      {
        this.state.alert ?
        <div className='alert fading'>
          { this.some_prop }
        </div> :
        null
      }
      { this.some_render() }
    </div>
    { extra_auth_reqd ? this.some_other_render : null }
    { local_conn_btn_present ? <SomeComponent /> : null }
  </div>;
},

render: function() {
  if(this.some_prop) {
    return <div>
      <SomeOtherComponent />;
    </div>;
  } else {
    return this.render_login();
  }
}

我的问题只与render_login有关。在Chrome中运行return this.render_login时，外包装div的ID为validatedFactory_view，如下所示：

但它运行正常并在Firefox中将id设置为login_view（文件名），如下所示：

为什么会发生这种情况？我可以手动将id设置为login_view，这可以解决问题，但我想了解导致此行为的原因。

Answer 1

首先，你没有执行this.render_login，你错过了括号。其次，我不认为该类来自该组件，而是来自父组件。

Answer 2

我在Chrome和Firefox上进行了一些调试后发现了这个问题。我在顶层id设置了div的{​​{1}}，其代码如下所示：

app_view

在Firefox中，render: function() { var name = this.state.view.name || this.state.view.view_name; return <div id={name + "_view"} className="view"> ... some random stuff </div>; } 为this.state.view.name，但在Chrome中为null。经过一番挖掘，我发现在两种浏览器中，validatedFactory都指向this.state.view vendor/js/react/src/core/ReactDescriptorValidator.js函数createFactory中的函数。代码看起来像这样：

validatedFactory

正如您在此处所看到的，var ReactDescriptorValidator = { createFactory: function(factory, propTypes, contextTypes) { var validatedFactory = function(props, children) { var descriptor = factory.apply(this, arguments); for (var i = 1; i < arguments.length; i++) { validateChildKeys(arguments[i], descriptor.type); } ... return validatedFactory; } }; module.exports = ReactDescriptorValidator; 本质上是传递给validatedFactory函数的描述符工厂的包装器。它是一个指向匿名函数的变量，我们在这个函数上调用createFactory。

我进一步挖掘了为什么Chrome和Firefox中的名称之间存在差异，而且事实证明Firefox实际上并不支持匿名函数的推断名称，如here所示。直到最近，Chrome甚至都没有对此提供支持，因此一切正常，因为它也会.name返回null，而我的代码最终会使用name。谜团已揭开。我需要查看是否有任何理由我们专门检查view_name，如果没有，请将其删除。

非常感谢@matriay指出我正确的方向！