在React组件的render函数中返回DOM元素

Question

我有一个外部库,呈现一些自定义的js控件.该库返回一个可插入页面的DOM元素.

我在React中为这个库创建包装器.除非我不确定如何允许render函数接受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

这是一个简单的例子.

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

Answer 2

渲染一个普通的JSX div.ref在里面使用.

在ref回调中使用.appendChild(node)

请参阅https://reactjs.org/docs/refs-and-the-dom.html