Hiển thị chuỗi là thành phần React

Question

Tôi muốn hiển thị các thành phần phản ứng bằng một chuỗi làm đầu vào mà tôi đang nhận động từ một trang khác. BUt i sẽ có các tham chiếu cho các thành phần phản ứng. Dưới đây là ví dụ

Page1: 
----------------------------- 
loadPage('<div><Header value=signin></Header></div>'); 

Page2: 
-------------------------------- 
var React =require('react'); 
var Header = require('./header'); 

var home = React.createClass({ 

loadPage:function(str){ 

      this.setState({ 
      content : str 
      }); 

    }, 

render : function(){ 

    return {this.state.content} 
} 

}); 

Trong ví dụ này tôi đang nhận phần header như chuỗi, và tôi có tài liệu tham khảo của phần Header trong trang tiếp nhận tôi. Làm thế nào tôi có thể thay thế chuỗi bằng thành phần phản ứng thực tế

Answer 1

Để hiển thị thành phần phản ứng bằng chuỗi bạn có thể sử dụng.

var MyComponent = Components[type + "Component"]; 
return <MyComponent />; 

Để biết thêm thông tin kiểm tra phản ứng ở đây: React/JSX Dynamic Component Name

Answer 2

Nếu bạn có thể sống với việc có tất cả các thành phần của bạn trong một mô-đun, sau đó này hoạt động khá tốt:

import * as widgets from 'widgets'; 
    var Type = widgets[this.props.componentId]; 
    ... 
    <Type /> 

Việc nhập khẩu wildcard hoạt động giống như đăng ký thành phần mức độ cắt.

Answer 3

Thành phần react-jsx-parser này có vẻ như sẽ giải quyết được sự cố của bạn