reactjs - 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 有关.当 return this.render_login在 Chrome 中运行，外包装 div 的 ID 为 validatedFactory_view像这样:

但它工作正常并将 id 设置为 login_view (文件名)在 Firefox 中如下所示:

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

Answer 1

我在 Chrome 和 Firefox 上进行了一些调试后发现了这个问题。我正在设置 id的div在我的顶级 app_view代码看起来像这样:

render: function() {
  var name = this.state.view.name || this.state.view.view_name;
  return <div id={name + "_view"} className="view">
    ... some random stuff
  </div>;
}

在 Firefox 中， this.state.view.name是 null ，但在 Chrome 中，它是 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 的描述符工厂的包装器。功能。它是一个指向匿名函数的变量，我们正在调用的正是这个函数 .name在。

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

非常感谢@matriay 为我指明了正确的方向!