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

Posted 2023-02-24

【中文标题】在重新渲染时反应不更新属性

【英文标题】：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 尝试过，它似乎已经解决了这个问题。谢谢！

【参考方案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 文档。