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中。

Answer 2

仅强调解决方案，@ user633183的评论：

使用dangerouslySetInnerHTML

Documentation link

如何将字符串转换为jsx？

2 个答案: