在 React 中的自定义元素中修改属性

Modifying attributes from within custom element inside React

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

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

<my-component foo="bar"/>

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

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

  1. 我的理解正确吗？
  2. 如何才能在下一个渲染周期将 foo 的值设置回 bar？

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

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

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