Question

我将从我的模板渲染中获取动态html内容，该内容由其他反应组件呈现。我如何将这个html字符串转换为React组件，以便我可以在我的渲染函数中使用该组件。请注意，我想保留用于差异的特定反应属性。

＆＃13;

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

＆＃13;

我尝试将htmlString转换为HTMLDocument对象，并在willmount回调中递归创建React.createElement并设置react组件。但是，错误是类型toUpperCase未定义。

Answer 1

几个小时前，我在npm（https://www.npmjs.com/package/html-to-react）发布了一个html-to-react模块，可以帮助你。

如果您有任何需要，请告诉我，我当然可以与您合作，使模块更加灵活。

Answer 2

因为您将组件存储为字符串，所以必须使用dangerouslySetInnerHTML。这是我的建议。我希望别人能有更好的答案。：）

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

Answer 3

您可以使用React HTML Parser。这是链接React HTML Parser

这是一个用于将HTML字符串转换为React组件的实用程序。避免使用dragonallySetInnerHTML，并将标准HTML元素，属性和内联样式转换为它们的React等效项。

动态HTML字符串反应组件

3 个答案: