Chuỗi HTML động để phản ứng thành phần

Question

Tôi sẽ nhận được nội dung html động từ việc hiển thị mẫu của tôi được hiển thị bởi các thành phần phản ứng khác. Làm thế nào tôi sẽ chuyển đổi chuỗi html này thành thành phần React để tôi có thể sử dụng thành phần trong hàm render của tôi. Lưu ý rằng tôi muốn giữ lại các thuộc tính cụ thể phản ứng được sử dụng để phân biệt.

React.createClass({ 
 
    var self = this; 
 

 
    componentWillMountDown : function() { 
 
    //htmlString is essentially huge dynamic one in my actual case 
 
    var htmlString = "<div class='classDiv' react-id="0.1"><input type='text'/></div>"; 
 
    self.setState({responseString : htmlString}); 
 
    self.forceUpdate(); 
 
    }, 
 
    
 
    render: function() { 
 
    var Response = this.state.responseString; 
 
    //how would I return the react component as response? 
 
    return (<Response/>); //does not work. err is it shd be valid react component 
 
    } 
 
});

Tôi đã thử chuyển đổi htmlString để đối tượng HTMLDocument và đệ quy tạo React.createElement trong callback willmount và thiết lập phản ứng thành phần. tuy nhiên, lỗi là loại toUpperCase không được xác định.

Answer 1

Vì bạn lưu trữ thành phần của mình dưới dạng chuỗi nên bạn phải sử dụng dangerouslySetInnerHTML. Đây là đề nghị của tôi. Tôi hy vọng người khác sẽ có câu trả lời tốt hơn. :)

render: function() { 
    var self = this; 
    var Response = React.createClass({ 
     render: function(){ 
     return (<div dangerouslySetInnerHTML={{__html: self.state.responseString}}></div>) 
     } 
    }); 
    return (
      <Response /> 
    ) 
    } 

Answer 2

Một vài giờ trước, tôi đã công bố một module html-to-react trong NPM (https://www.npmjs.com/package/html-to-react) có thể giúp bạn.

Vui lòng cho tôi biết nếu có bất cứ điều gì bạn cần, tôi chắc chắn có thể làm việc với bạn để làm cho mô-đun linh hoạt hơn.