返回DOM元素在渲染阵营成分的功能

Question

我有一个使一些自定义的js控制的外部库。该库返回一个可以在页面中插入一个DOM元素。

我为这个图书馆创建包装的反应。我拥有这一切有线了，除了我不知道如何让渲染函数接受的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从未更换。

Answer 1

渲染一个正常的JSX div。内部使用ref。

里面的ref回调使用.appendChild(node)

见https://reactjs.org/docs/refs-and-the-dom.html

Answer 2

这里有一个简单的例子。

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