动态HTML字符串反应组件

Question

I would be getting dynamic html content from my template rendering which was rendered by other react components. How would I convert this html string to React component so that I can use the component in my render function. Note that I want to preserve react specific attributes used for diffing.

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

I've tried converting htmlString to HTMLDocument object and recursively creating React.createElement in willmount callback and setting react component. however, the error is type toUpperCase is not defined.

Answer 1

A few hours ago, I published an html-to-react module in npm ( https://www.npmjs.com/package/html-to-react ) that may help you.

Please let me know if there's anything you need, I can certainly work with you to make the module more flexible.

Answer 2

Because you store your component as string so you have to use dangerouslySetInnerHTML . This is my suggestion. I hope someone else will have the better answer. :)

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

Answer 3

You can use React HTML Parser. Here is the link React HTML Parser

It's a utility for converting HTML strings into React components. Avoids the use of dangerouslySetInnerHTML and converts standard HTML elements, attributes and inline styles into their React equivalents.