Динамическая строка 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.