Question

我有一个带有name属性和子文本的React元素，两者都取自props中的相同值。

当使用不同的prop值重新渲染React组件时，只更新子文本，但name属性保持不变：

var Inner = React.createClass({
    render: function () {
      var name = this.props.name;
      return ( <div name={name}>{name}</div> );
    }
});

React.render(<Inner name="red"/>, document.getElementById('outer'));
// element is now <div name="red" data-reactid=".0">red</div>

React.render(<Inner name="green"/>, document.getElementById('outer'));
// element is now <div name="red" data-reactid=".0">green</div>

如您所见，在第二次调用React.render后，name属性仍为红色。（见http://jsfiddle.net/chyp9mxL/）

可以通过在渲染函数中添加key={name}来解决此问题，但我不明白为什么必须这样做。只有当我们有多个组件时才需要密钥吗？我们这里只有一个。

Answer 1

是因为div无法将name识别为有效道具吗？我记得读过将非法道具传递给原生DOM元素可能会产生意想不到的结果。

添加key作为道具只会给div一个身份。因此，React可以识别该孩子并正确更新该值。

这里的关键是要了解DOM中的所有内容都没有 React“Virtual DOM”中的表示，因为直接操纵DOM（就像用户改变一个值或一个 jQuery插件监听一个元素）没有被React注意到，没有使用唯一和常量键最终将使用React重新创建DOM 当键不是常量（并且丢失任何键）时组件的节点节点中未跟踪的状态）或重用DOM节点来渲染另一个节点密钥不唯一时的组件（并将其状态与此绑定）其他组成部分）。

说this条。但它真的很奇怪！我希望有人能提出正确的解释。

Answer 2

因为div不是反应组件，所以你可以传递道具来反应组件！您需要阅读有关反应道具的更多信息，here是反应道具文件。

React不会在重新渲染时更新属性

2 个答案: