динамическая HTML-строка для взаимодействия компонента

Question

Я получаю динамическое содержимое html из моего рендеринга шаблона, которое было визуализировано другими компонентами реакции. Как бы преобразовать эту строку html в компонент React, чтобы я мог использовать компонент в моей функции рендеринга. Обратите внимание, что я хочу сохранить конкретные атрибуты, используемые для различения.

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

Я попытался преобразовать HTMLString в объект HTMLDocument и рекурсивно создания React.createElement в willmount обратного вызова и настройки реакции компонента. однако, ошибка типа toUpperCase не определена.

Answer 1

Потому что вы храните свой компонент как строку, поэтому вам нужно использовать dangerouslySetInnerHTML. Это мое предложение. Надеюсь, у кого-то будет лучший ответ. :)

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

Answer 2

Несколько часов назад я опубликовал html-to-react модуль в НОМ (https://www.npmjs.com/package/html-to-react), которые могут помочь вам.

Пожалуйста, дайте мне знать, если что-то вам нужно, я, безусловно, могу работать с вами, чтобы сделать модуль более гибким.