javascript - 简单的层次结构但仍然警告 "Any use of a keyed object should be wrapped in React.addons.createFragment(object)"

Question

React 总是通过非常简单的 dom 层次结构触发警告:

"Warning: Any use of a keyed object should be wrapped in React.addons.createFragment(object) before being passed as a child."

<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 ;您收到警告是因为您无意中将对象作为此组件的子项传递。

去掉 chaptersNodes 周围的大括号应该可以解决这个问题:

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