Question

我有一个外部库，可以呈现一些自定义的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永远不会被替换。

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

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

2 个答案: