React render component sử dụng tên của nó

Question

Tôi đang thử nghiệm React.js và nó hoạt động rất tốt. Tôi tự hỏi nếu nó có thể tiêm các lớp học đến các lớp học khác như vậy:

var Container = React.createClass({ 
    render: function() { 
     <{this.props.implComponent}/> 
    } 
}); 

Giả sử implComponent đã được thông qua như sau:

React.render(
    <Container implComponent="somePredefinedVariable" />, 
    document.getElementById('content') 
); 

này không làm việc vì một lỗi cú pháp. Tôi có thể dễ dàng hiểu tại sao.

Nói cách khác, tôi muốn chèn các lớp học vào các lớp khác dựa trên tên. Điều này có thể không? Làm thế nào tôi có thể làm điều đó?

Answer 1

Bạn đã thân thiết. Bạn cần phải vượt qua lớp thành phần nó tự (không phải là một chuỗi), và sau đó bởi vì cú pháp thẻ có một biến đã có, bạn loại bỏ các {} s. Cũng đừng quên trả lại nút từ kết xuất.

var Container = React.createClass({ 
    render: function() { 
     return <this.props.implComponent /> 
    } 
}); 

React.render(
    <Container implComponent={SomePredefinedVariable} />, 
    document.getElementById('content') 
); 

Nếu bạn muốn vượt qua một thành phần dom cơ bản, bạn muốn sử dụng một chuỗi

này có ý nghĩa nếu bạn suy nghĩ về biến đổi kết quả

var Container = React.createClass({displayName: "Container", 
    render: function() { 
     return React.createElement(this.props.implComponent, null) 
    } 
}); 

ReactDOM.render(
    React.createElement(Container, {implComponent: SomePredefinedVariable}), 
    document.getElementById('content') 
); 

ReactDOM.render(
    React.createElement(Container, {implComponent: "div"}), 
    document.getElementById('content') 
);