问题 动态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
   }
});

1937
2018-06-08 17:11


起源



答案:


几个小时前,我发表了一篇文章 html-to-react 模块在npm(https://www.npmjs.com/package/html-to-react)这可能对你有所帮助。

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


8
2018-06-20 23:56



如何在Asp.Net MVC项目中使用htm-to-react?看着互联网,但无法找到一个简单的答案。 - Faisal Mq
您可能必须将ReactJS.net配置为使用webpack,这是一种巨大的痛苦。看到: reactjs.net/guides/webpack.html  - 尝试这种方法并成功后(经过几天的工作)我修改了Asp.Net MVC项目以使用RESTful API并将前端移植到create-react-app - Dave Cole


答案:


几个小时前,我发表了一篇文章 html-to-react 模块在npm(https://www.npmjs.com/package/html-to-react)这可能对你有所帮助。

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


8
2018-06-20 23:56



如何在Asp.Net MVC项目中使用htm-to-react?看着互联网,但无法找到一个简单的答案。 - Faisal Mq
您可能必须将ReactJS.net配置为使用webpack,这是一种巨大的痛苦。看到: reactjs.net/guides/webpack.html  - 尝试这种方法并成功后(经过几天的工作)我修改了Asp.Net MVC项目以使用RESTful API并将前端移植到create-react-app - Dave Cole


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

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

7
2018-06-08 17:44



刚编辑了这个问题。由于我想保留特定于特定属性的属性,因此无法使用危险的SetInnerHtml。是否有一种从HTML字符串创建反应组件的编程方法 - Bharanidharan K