Question

React始终使用非常简单的dom层次结构触发警告：

“警告：应该包含对键控对象的任何使用 React.addons.createFragment（object）在作为子项传递之前。“

<div id="content">
    <div data-reactid=".0">
        <div data-reactid=".0.0">
            <div data-reactid=".0.0.$chaptersNodes:0:0"></div>
            <div data-reactid=".0.0.$chaptersNodes:0:1"></div>
            <div data-reactid=".0.0.$chaptersNodes:0:2"></div>
         </div>
    </div>
 </div>

代码从存储在props字段中的数据数组中生成子代，我已将其简化了。

var ChapterList = React.createClass({
  render: function() {    

        if (this.props.data) {
            chaptersNodes = this.props.data.map(function(section, index) {
                // here normally generating sub children but simplified here
                return React.DOM.div({});
            });
        });

        return React.DOM.div({}, {chaptersNodes});
    }

    return React.DOM.div();

  }
});

我尝试过不同的方式......但是没有任何改变......任何想法？

Answer 1

如果您使用Babel或带有harmony标志的JSX转换器或使用支持ES6对象文字简写的浏览器来转换代码，则此行：

return React.DOM.div({}, {chaptersNodes})

实际上相当于：

return React.DOM.div({}, {chaptersNodes: chaptersNodes})

React lets you specify component keys by returning a key-to-component Object;您收到警告是因为您无意中将Object作为此组件的子项传递。

删除chaptersNodes周围的大括号应解决此问题：

return React.DOM.div({}, chaptersNodes)

简单的层次结构但仍然警告＆＃34;任何对键控对象的使用都应该包含在React.addons.createFragment（object）＆＃34;

1 个答案: