在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永遠不會被替換。

Answer 1

渲染一個正常的JSX div。裏面用ref。

裏面的ref回調使用.appendChild(node)

見https://facebook.github.io/react/docs/refs-and-the-dom.html

Answer 2

這裏有一個簡單的例子。

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