Я пытаюсь создать текстовый редактор, например Draft. js, что влечет за собой использование contentEditable. В любом случае, я использую MutationObserver для обнаружения изменений, и я хочу иметь возможность отражать изменения в DOM в состоянии.
Когда компонент отображает строку, findDOMNode возвращает текстовый узел DOM, содержащий это значение.
Я хочу сравнить цель мутации с визуализированным dom и отразить эти изменения в состоянии приложения. Скорее всего, это сработало бы, если бы я использовал findDOMNode, однако он устарел. Есть ли альтернатива? Или есть способ использовать ссылки, чтобы это произошло?
В качестве примера у меня есть класс PElement:
class PElement extends React.Component {
constructor (props) {
super(props);
this.state = {
children = []
}
/*Parse content props, etc, for children*/
this.ref = React.createRef();
this.compare = this.compare.bind(this);
}
compare (node) {
//This will allow me to check if the target of the mutation was this component.
return this.ref.current === node;
}
render () {
return (<p ref={this.ref}>{this.state.children}</p>);
}
}
Что касается класса Text:
class Text extends React.Component {
constructor (props) {
super(props);
//No state. This will be lowest level and controlled.
this.ref = React.createRef();
this.compare = this.compare.bind(this);
}
compare (node) {
return this.ref.current === node;
}
render () {
//I don't know how to create a ref to the rendered text node.
return this.props.content;
}
}
}