反应.js密钥生成

Question

我对使用一组键（没有重复项）的和解算法有问题。代码片段类似于示例：`

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]

结果是在第二次渲染期间仅呈现两个元素。

Answer 1

如果你

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

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

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

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

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

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

到：

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