如何将字符串转换为jsx？

Question

How can I convert this string to jsx? I want this string to appear as an HTML element.

this.setState({
    input: "<h1 id="heading">Heading</h1> <h2 id="sub-heading">Sub-heading</h2> <h3 id="another-deeper-heading">Another deeper heading</h3>"
});

render() {
    return <div>{this.state.input}</div>
} 

Answer 1

You don't need to quote HTML elements in JSX, but an HTML element can only have one parent. Get rid of the quotes, and move the div up to the variable, and you'll be all set.

So:

this.setState({
   input: <div><h1 id="heading">Heading</h1> <h2 id="sub-heading">Sub-heading</h2> <h3 id="another-deeper-heading">Another deeper heading</h3></div>
});

render() {
    return this.state.input
} 

I'm not sure what you gain from this, though. Best practice would be to keep simple data in props and state , and put the HTML wrapper in the render function, not in state .

Answer 2

Just to highlight the solution, the comment by @user633183:

Use dangerouslySetInnerHTML

Documentation link