Javascript React绑定到reactDOM之外的HTML元素

我有一个非常复杂的MathJax渲染方程，里面有交互元素。这是在react组件中呈现的，但是MathJax与react绝对不兼容

因此，我现在有了一个react应用程序，它可以用交互元素（按钮、输入）呈现MathJax元素

撇开这是一个大禁忌不谈，但最安全的方法是：

更新输入字段值

将onClick操作绑定到按钮

它们是否已成为组件状态的一部分

我应该在react组件中使用标准js（document.queryselectoral和addEventListener）来更新状态，还是有更好的方法来实现这一点

谢谢你的帮助，输入

请记住，除非重写mathJax，否则我在这件事上束手无策

我应该在react组件中使用标准js（document.queryselectoral和addEventListener）来更新状态，还是有更好的方法来实现这一点

是的，但至少对容器使用而不是

document.querySelectorAll

，然后在该容器内工作（通过

元素#querySelectorAll

等）：

何时使用引用

REF有几个很好的用例：

• 管理焦点、文本选择或媒体播放
• 触发命令式动画
• 与第三方DOM库集成。

（我强调第三点）

该页面中的简单示例，稍作调整：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.mathJaxRef = React.createRef(); // ***
  }
  componentDidMount() {
    // Use `this.mathJaxRef.current`, which will be the `div` below, to do what
    // you need to, including hooking up event handlers if you cannot do so in the
    // usual React way
  }
  render() {
    return <div ref={this.mathJaxRef}>(MathJax stuff here)</div>;
  }
}

类MyComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.mathJaxRef=React.createRef（）；//*** } componentDidMount（）{ //使用'this.mathJaxRef.current'，这将是下面的'div'，来做什么 //您需要这样做，包括连接事件处理程序（如果在 //通常的反应方式 } render（）{ return（这里是MathJax的东西）； } }

---

我认为

事件总线

将非react事件加载到react生态系统（反之亦然）可能也是一种不错的方法。您可能还希望签出（目前处于测试阶段）不再需要DOM访问（您甚至可以为react的vdom编写自定义适配器）.嗨@PeterKrautzberger谢谢你给我打这个电话，我也去看看！谢谢，伙计，这就是我要找的！