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 Virtual DOM会有所不同并触发与您类似的错误。要修复它只需更改：

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

成：

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

React.js密钥生成

1 个答案: