React привязка к элементу HTML за пределамиactDOM

Question

У меня очень сложное уравнение MathJax с интерактивными элементами внутри него.Это отображается внутри компонента реакции, но MathJax абсолютно несовместим с реагировать.

Итак, я нахожусь в состоянии иметь приложение реагирования, которое отображает элемент MathJax с интерактивными элементами (кнопками, входами).

Не говоря уже о том, что это большое нет-нет, но какой самый безопасный способ:

1. Обновить значение поля ввода
2. Привязать действие onClickк кнопке

И стали ли они частью состояния компонента?

Должен ли я использовать стандартные компоненты js (document.querySelectorAll и addEventListener) внутри компонента реакции, которые обновляют состояниеили есть лучший способ добиться этого?

Спасибо за любую помощь, ввод!

Пожалуйста, помните, что если не считать переписывания mathJax, мои руки связаны в этом вопросе.

Answer 1

Должен ли я использовать стандартные компоненты js (document.querySelectorAll и addEventListener) внутри компонента реакции, которые обновляют состояние, или есть лучший способ добиться этого?

Да, но с использованием refs вместо document.querySelectorAll, по крайней мере, для контейнера, и затем работа в этом контейнере (через Element#querySelectorAll и т. Д.):

Когда использовать Refs

Существует несколько хороших вариантов использования ссылок:

• Управление фокусировкой, выделением текста или воспроизведением мультимедиа.
• Запуск императивной анимации.
• Интеграция со сторонними библиотеками 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>;
  }
}