động Rendering một Phản ứng thành phần

Question

Trong Phản ứng JSX nó không xuất hiện để có thể làm điều gì đó như thế này:

render: function() { 
 
    return (
 
    <{this.props.component.slug} className='text'> 
 
    {this.props.component.value} 
 
    </{this.props.component.slug}> 
 
); 
 
}

tôi nhận được một lỗi phân tích cú pháp: Bất ngờ thẻ {. Đây có phải là thứ mà React không thể xử lý không?

Tôi đang thiết kế thành phần này để dưới mui xe, các giá trị được lưu trữ trong this.props.component.slug sẽ chứa các phần tử HTML hợp lệ (h1, p, v.v ...). Có cách nào để thực hiện công việc này không?

Answer 1

Bạn không nên đặt thành phần sên trong dấu ngoặc nhọn:

var Hello = React.createClass({ 
    render: function() { 
     return <this.props.component.slug className='text'> 
      {this.props.component.value} 
     </this.props.component.slug>; 
    } 
}); 

React.renderComponent(<Hello component={{slug:React.DOM.div, value:'This is my header'}} />, document.body); 

Đây là một fiddle làm việc: http://jsfiddle.net/kb3gN/6668/

Ngoài ra, bạn có thể tìm thấy JSX biên dịch hữu ích để gỡ lỗi các loại lỗi: http://facebook.github.io/react/jsx-compiler.html

Answer 2

Chỉnh sửa: Có thể bạn quên thêm /** @jsx React.DOM */ vào đầu js?

Bạn có thể sử dụng React.DOM mặc dù:

render: function() { 
    return React.DOM[this.props.component.slug](null, this.props.component.value); 
} 

http://jsbin.com/rerehutena/2/edit?html,js,output

Tôi không phải là một chuyên gia phản ứng, nhưng tôi nghĩ rằng tất cả các thành phần cần được xây dựng với một từ khóa cụ thể ngay từ đầu. Vì vậy, nó có thể trình bày một mục đích rõ ràng.

Answer 3

Như Nilgun trước đây chỉ ra, sên thành phần không nên được bọc trong dấu ngoặc nhọn.

Nếu bạn quyết định để lưu trữ nó trong một biến, chắc chắn rằng nó bắt đầu với một chữ cái viết hoa.

Dưới đây là một ví dụ:

var Home = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <h3>This is an input</h3> 
     <CustomComponent inputType="input" /> 
     <h3>This is a text area</h3> 
     <CustomComponent inputType="textarea" /> 
     </div> 
    ); 
    } 
}); 

var CustomComponent = React.createClass({ 
    render: function() { 
    // make sure this var starts with a capital letter 
    var InputType = this.props.inputType; 
    return <InputType />; 
    } 
}); 

React.render(<Home />, document.getElementById('container')); 

Dưới đây là một fiddle làm việc: https://jsfiddle.net/janklimo/yc3qcd0u/

Answer 4

Nếu mục đích của bạn là để bơm các thành phần thực tế trả lại, bạn có thể làm một cái gì đó như thế này, rất thuận tiện cho việc kiểm tra hoặc bất kỳ lý do gì bạn muốn tự động chèn các thành phần để hiển thị.

var MyComponentF=function(ChildComponent){ 
    var MyComponent = React.createClass({ 
     getInitialState: function() { 
      return { 
      }; 
     }, 
     componentDidMount: function() { 
     }, 
     render: function() { 
      return (
       <div className="MyComponent"> 
        <ChildComponent></ChildComponent> 
       </div> 
      ); 
     } 
    }); 
    return MyComponent; 
}; 

var OtherComponentF=function(){ 
    var OtherComponent = React.createClass({ 
     getInitialState: function() { 
      return { 
      }; 
     }, 
     componentDidMount: function() { 
     }, 
     render: function() { 
      return (
       <div className="OtherComponent"> 
        OtherComponent 
       </div> 
      ); 
     } 
    }); 
    return OtherComponent; 
}; 

var AnotherComponentF=function(){ 
    var AnotherComponent = React.createClass({ 
     getInitialState: function() { 
      return { 
      }; 
     }, 
     componentDidMount: function() { 
     }, 
     render: function() { 
      return (
       <div className="AnotherComponent"> 
        AnotherComponent 
       </div> 
      ); 
     } 
    }); 
    return AnotherComponent; 
}; 

$(document).ready(function() { 
    var appComponent = MyComponentF(OtherComponentF()); 

    // OR 
    var appComponent = MyComponentF(AnotherComponentF()); 

    // Results will differ depending on injected component. 

    ReactDOM.render(React.createElement(appComponent), document.getElementById("app-container")); 
});