Возвращаемый элемент DOM в функции рендеринга компонента React

У меня есть внешняя библиотека, которая отображает некоторые пользовательские элементы управления js. Библиотека возвращает элемент DOM, который может быть вставлен на страницу.

Я создаю оболочку для этой библиотеки в React. Я все подключился, но я не уверен, как разрешить функции рендеринга принимать элемент DOM в качестве возвращаемого

render() {
 if (this.state.someType) {
   let customControl = new this.state.someType();
   var node = customControl.getNode(); 

   return node; //This is an HTMLDOMElement i.e. div or span
 }

 return <div>Loading Custom Control...</div>;
}

Я могу отлаживать код, и все работает правильно. Узел - это то, что я ожидаю, но html на странице никогда не будет заменен.

Ответ 1

Сделать нормальный JSX div. Используйте ref внутри.

Внутри обратного вызова ref используйте .appendChild(node)

См. Https://reactjs.org/docs/refs-and-the-dom.html.

Ответ 2

Вот простой пример.

render() {
   const newNode = document.createElement('p'); 
   return <div ref={(nodeElement) => {nodeElement && nodeElement.appendChild(newNode)}}/>
}