Динамическая строка HTML для реагирования компонента

Я получаю динамическое содержимое 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
   }
});

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

Вы можете использовать React HTML Parser. Вот ссылка React HTML Parser

Это утилита для преобразования строк HTML в компоненты React. Избегает использования dangerouslySetInnerHTML и преобразует стандартные элементы HTML, атрибуты и встроенные стили в их эквиваленты React.