javascript - 如何将字符串转换为jsx？

Question

如何将此字符串转换为 jsx？我希望此字符串显示为 HTML 元素。

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

在 JSX 中不需要引用 HTML 元素，但是一个 HTML 元素只能有一个父元素。去掉引号，将 div 移至变量，一切就绪。

所以:

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
} 

不过，我不确定您从中得到了什么。最佳做法是将简单数据保存在 props 和 state 中，并将 HTML 包装器放在渲染函数中，而不是在 state 中。