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

Question

I have an external library that renders some custom js controls. The library returns a DOM element that can be inserted in to the page.

I am creating wrapper for this library in React. I have it all wired up except I'm not sure how to allow the render function to accept the DOM element as its return

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>;
}

I am able to debug the code and everything is working properly. The node is what I expect but the html on the page is never replaced.

Answer 1

Here's a simple example.

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

Answer 2

Render a normal JSX div . Use ref inside.

Inside the ref callback use .appendChild(node)

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