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

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从未被替换。

- SirPyros

Answer 1

这是一个简单的例子。

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

- Stanislav Mayorov

---

当元素卸载时，ref也会被调用，导致在该调用中 nodeElement 值为 undefined。你应该包含一个检查 nodeElement && nodeElement.appendChild...，来避免出现错误。 - Qwerty

这是一个很好的答案，因为它包含了可以与被接受的答案一起使用的代码示例。关于nodeElement未定义的上述评论也很有帮助，可以包含在这个代码示例中。 - KenEucker

Answer 2

渲染一个普通的 JSX div。在内部使用ref。

在 ref 回调函数内使用 .appendChild(node)

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

- Walle Cyril