Question

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

因此，我现在可以使用一个react应用程序，该应用程序使用交互元素（按钮，输入）呈现MathJax元素。

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

更新输入字段值
将onClick动作绑定到按钮

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

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

谢谢您的帮助！

请记住，除了重写mathJax之外，我在这件事上也束手无策。

Answer 1

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

是的，但是至少对容器使用refs而不是document.querySelectorAll，然后在该容器内工作（通过Element#querySelectorAll等）：

何时使用参考

裁判有一些很好的用例：


管理焦点，文本选择或媒体播放。

触发命令性动画。

与第三方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>;
  }
}

React绑定到reactDOM之外的HTML元素

1 个答案: