为 onClick 处理程序插入临时 DOM 元素

Question

我有一个 HTML table 由 React render() 生成，它绑定到 websocket 以进行实时更新。

我想要做的是将 React 事件处理程序 "onClick" 附加到单元格，用自定义片段 DOM 替换单元格中的值，例如一些 Bootstraps 下拉菜单 HTML 以便用户可以更新该单元格。

我可以在点击事件处理程序中使用 .getDOMNode() 然后手动操作 DOM 并插入代码，但是如果由于以下原因调用了此组件上的 render()来自 websocket 事件的新更新状态将被覆盖。如果出现这种竞争情况，我需要通知用户而不是简单地替换 DOM 。我刚刚看到了 componentWillUpdate() 虽然这仍然感觉我没有正确使用 React。

有没有更好的方法？操纵 DOM 感觉很脏，更改状态也不正确。

Answer 1

更新内部组件状态正是针对这种情况。该组件应负责确定其是否处于活动状态。如果在使用 active: true 之类的内容触发单击处理程序时更新组件上的状态，则会触发重新渲染。如果 active 为真，则在渲染函数中添加额外的 DOM 元素。那么你应该考虑三种不同的可能性：

• onBlur
• onUpdate 可以 以两种方式触发。无论哪种方式你都可能想要设置 active: false 状态。
  • websockets - 你需要通知你的 这里的用户可能不管组件是active还是不是
  • 用户 - 将正常更新

这样做意味着 React 始终完全控制 DOM，这是避免 React 出现问题的好方法。