从 React 内部的自定义元素中修改属性答案

【问题标题】：Modifying attributes from within custom element inside React从 React 内部的自定义元素中修改属性
【发布时间】：2016-07-19 02:00:49
【问题描述】：

我在 React 中使用了 custom element。我希望能够从 React 更改元素的属性。我还希望能够从元素本身内部更改相同的属性。不幸的是，当元素更改自己的属性时，这会导致一些奇怪的副作用，我认为这与 React 的虚拟 DOM 不知道属性已更改有关。

为了说明，假设我们有一个返回以下内容的 React 渲染函数：

<my-component foo="bar"/>

并且my-component 内部有逻辑，当单击元素时，会将foo 的值从bar 更改为unicorn。到目前为止，一切都按预期工作。问题是在下一个渲染周期中，foo 没有设置回bar。我想要将foo 设置回bar。

我的猜测是 React 的虚拟 DOM 将 bar 作为缓存值（它没有意识到它已更改为 unicorn），因此不会尝试将其设置回 bar。

【问题讨论】：

如果属性或子项没有变化，React 不会触及<my-component>。
自定义元素必须是真实的才能很好地与 React 配合使用，或者您可以让元素使用 React 的更新周期（1-way），或类似 redux 的东西。简而言之，不要在没有 React 的情况下更改 HTML。
听起来您在某处进行了硬编码（foo="bar" 是硬编码）？也许可以考虑在 react 背后的架构框架来运行和管理状态。我个人喜欢 Redux。
@NguyễnĐăngKhoa：一般来说，这是真的，但如果 react 决定大替换比许多小更新更有效，“未更改”元素可以被替换。应编写应用程序代码以在任何一种情况下都能正常工作...
@ajmajmajma 我实际上没有 bar 硬编码。这只是为了说明。实际上，bar 来自 Redux。

【解决方案1】：

您对虚拟 DOM 的看法是正确的。要使其按照您想要的方式运行，需要以支持它的方式编写自定义元素。

认为这相当于controlling an <input>，您可以将处理程序绑定到输入的onChange，然后调用event.preventDefault() 来阻止对值的任何更改，或者将新值传递回@987654325 @ 更新虚拟 DOM。

因此，要使其正常工作，自定义元素需要支持类似的事件处理程序。

【讨论】：