Phần tử DOM trả về trong hàm render của thành phần React

Question

Tôi có một thư viện bên ngoài để hiển thị một số điều khiển js tùy chỉnh. Thư viện trả về một phần tử DOM có thể được chèn vào trang.

Tôi đang tạo trình bao bọc cho thư viện này trong React. Tôi có nó tất cả có dây, ngoại trừ tôi không chắc chắn làm thế nào để cho phép hàm render để chấp nhận các phần tử DOM như trở về của nó

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

Tôi có thể gỡ lỗi mã và mọi thứ hoạt động bình thường. Các nút là những gì tôi mong đợi nhưng html trên trang không bao giờ được thay thế.

Answer 1

Hiển thị JSX div bình thường. Sử dụng ref bên trong.

Bên trong việc sử dụng ref callback .appendChild(node)

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

Answer 2

Dưới đây là một ví dụ đơn giản.

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