React.js 密钥生成答案

【问题标题】：React.js key generationReact.js 密钥生成
【发布时间】：2015-04-01 00:44:23
【问题描述】：

我对使用一组密钥（不重复）的协调算法有疑问。代码的sn-p与示例类似： `

var ResourceTable = React.createClass({
    getInitialState: function() {
        return {data: [{"rid": "Ciao ", "id": 10}, {"rid": "Mondo!", "id": 2}]};
    },
    componentDidMount: function() {
        self = this;
        self.setState({data: [{"rid":"first", "id": 3},{"rid":"second", "id": 1},{"rid":"third", "id": 2}]});
    },
    render: function() {
        var commentNodes = this.state.data.map(function (resource, index) {
            return (
                <Resource key={resource.id} rid={resource.rid}/>
            );
        });

        return(
            <table>
                {commentNodes}
            </table>
        );
    }
});

` 第一次呈现对象时，一切正常（对于 resource.id 的每个值）。第二次我有一个无人看管的行为：有时每个元素都正确渲染，有时没有，我做了很多尝试，但我找不到解释。导致错误的情况是：

第一个渲染键：[10,2]
第二个渲染键：[3,1,2]

结果是第二次渲染时只渲染了两个元素。

【问题讨论】：

你能提供一个最小的演示吗？我认为这里没有足够的信息来给出答案。
发布了整个组件。
一个最小的演示将包括资源组件。这很可能是问题所在。
React + = 即时失败 :D 我想知道 React 团队是否知道这个错误有多常见。

标签： hashmap key reactjs

【解决方案1】：

如果您要渲染在浏览器中发生变异的 HTML，React 非常敏感。 <table> 就是这种情况，可以这样创建：

<table>
    <tr><td>Cell</td></tr>
</table>

但实际上浏览器正在将其更改为：

<table>
    <tbody>
        <tr><td>Cell</td></tr>
    </tbody>
</table>

在此操作之后，DOM 和 React Virtual DOM 不同，并且会触发像您这样的错误。要修复它，只需更改：

return (
    <table>
        {commentNodes}
    </table>
);

进入：

return (
    <table>
        <tbody>{commentNodes}</tbody>
    </table>
);

【讨论】：