在重新渲染时反应不更新属性答案

【问题标题】：React not updating attribute on re-rendering在重新渲染时反应不更新属性
【发布时间】：2017-01-23 07:02:28
【问题描述】：

我有一个带有 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} 来解决，但我不明白为什么必须这样做。不是只有当我们有多个组件时才需要键吗？我们这里只有一个。

【问题讨论】：

我想弄清楚为什么你有两个React.render()...
这适用于新版本的 react 和 react-dom。因此，包括 react-dom 并调用 ReactDOM.render 而不是 React.render 应该可以做到。
@Chris 只是为了提供一个最简单的例子来说明问题。我想在现实生活中，第二次渲染会由一些用户操作触发。
@FrancoRisso 你是对的。我用 v15.3.1 尝试过，它似乎已经解决了这个问题。谢谢！

标签： reactjs

【解决方案1】：

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

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

这里的关键是要了解并非 DOM 中的所有内容都有 React“虚拟DOM”中的表示，因为直接对 DOM 的操作（例如用户更改值或 jQuery 插件监听一个元素）没有被 React 注意到，没有使用唯一和常量键最终会随着 React 重新创建 DOM 当键不是常量时组件的节点（并且丢失任何节点中未跟踪的状态）或重用 DOM 节点来呈现另一个当密钥不唯一时的组件（并将其状态绑定到此其他组件）。

说this 文章。但这真的很奇怪！我希望有人想出一个正确的解释。

【讨论】：

看起来像这样，因为渲染 <input> 反而正确地选择了 name 属性。
谢谢。即使该属性是非法的，这种行为也是不一致的。看起来这是一个已在最新版本的 React 中修复的错误。
@jmak 你能删除一个可以验证这一点的链接吗？很想知道！

【解决方案2】：

因为 div 不是 react 组件，所以你可以只传递 props 来响应组件！你需要阅读更多关于 react prop 的内容，here 是 react props 文档。

【讨论】：