简单的层次结构,但仍然警告"任何使用键控对象应包装在React.addons.createFragment(object)"

Question

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

"警告:任何对键控对象的使用都应该在作为子进行传递之前包装在React.addons.createFragment(对象)中."

<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允许您通过返回键到组件对象来指定组件键 ; 您收到警告是因为您无意中将Object作为此组件的子项传递.

放下花括号chaptersNodes应该解决这个问题:

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