React：在危险的SetInnerHTML 中使用React 组件

Question

I have a question about using React. As you can see from the title, I'm wondering if it is possible to use React component (that is created by React.createClass ) inside of dangerouslySetInnerHTML property. I have tried, but React just prints code without transformation like this:

const MySubComponent = React.createClass({
    render() {
        return (<p>MySubComponent</p>);
    }
});

...

let myStringHTML;
myStringHTML += "<ul>";
myStringHTML += "    <li>";
myStringHTML += "        <MySubComponent />";
myStringHTML += "    </li>";
myStringHTML += "</ul>";

const MyComponent = React.createClass({
    render() {
        return (
            <div dangerouslySetInnerHTML={{__html:myStringHTML}}></div>
        );
    }
});

I expected

<ul>
    <li>
        <p>MySubComponent</p>
    </li>
</ul>

but the code is just same as original string, and that means React didn't transform MySubComponent .

Is there a way to solve this problem? Above example is just simple but my actual code is quite complicated. It will be very thanks gimme a hand ;)

Answer 1

Old question but for future wonderers I think I might have a solution to this but do note that this will definitely break your redux flow if you're using it in your project.

Basically, you should have some id in your dangerousSetInnerHTML text.
The idea is to mount to that id in the componentDidMount lifecycle hook after your "dangerous HTML" has been mounted to DOM.

eg

const myStringHTML = `
  <div id="someid">
    some text in my dangerous html
  </div>
`;

const MySubComponent = React.createClass({
    render() {
        return (<p>MySubComponent</p>);
    }
});

...

let myStringHTML;
myStringHTML += "<ul>";
myStringHTML += "    <li>";
myStringHTML += "        <MySubComponent />";
myStringHTML += "    </li>";
myStringHTML += "</ul>";

const MyComponent = React.createClass({

    componentDidMount() {
      ReactDOM.render(<MyComponent />, document.querySelector('#someid'));
    }

    render() {
        return (
            <div dangerouslySetInnerHTML={{__html: myStringHTML}}></div>
        );
    }
});

Do note that componentDidMount will however not be called on component updates. For more info on this refer to the lifecycle hook of react .

Fair warning though that this does feel hacky and it is. This also has its limitations as I mentioned some above but there can be time where you have no other option but to use dangerousSetInnerHTML and at times like this, this is an option. At other times do what @Rohit Singh Sengar suggested and try to do it in react .

Answer 2

dangerouslySetInnerHTML expects a JS object with __html property which should be valid HTML markup. Instead you are providing <MySubComponent /> there and expecting it to render that component's html. React won't process <MySubComponent /> there. dangerouslySetInnerHTML as name suggests should be avoided. Moreover what you are trying to accomplish here can easily be done through React only.

const MySubComponent = React.createClass({
    render() {
        return (<li><p>MySubComponent {this.props.index}</p></li>);
    }
});

const MyComponent = React.createClass({
    render() {
        let subComponentList = [];
        [1,2,3,4,5].forEach(function(i){
            subComponentList.push(<MySubComponent key={i} index={i} />);
        }); 
        return (
            <ul>{subComponentList}</ul>
        );
    }
});

ReactDOM.render(<MyComponent />, mountNode);

Answer 3

Another approach would be to open a react portal. Ensure that the element has rendered and then simply

ReactDOM.createPortal(<YourComponent>,document.querySelector('selector'));

This is the cleanest way so far i have found to achieve this.