如何在 ReactJS 中将 HTML 作为 props 传递

Question

我的状态变量中有一个 HTML 标记值，如下所示

this.state = {
    value: '<p>This is a paragraph</p>'
}

我想在我的子组件中显示此 HTML 内容。我正在尝试做

<Childcomponent value={this.state.value} />

这样我就可以使用 来props访问子组件内的值。我的子组件是

render() {
    return(
        <div>{this.props.value}</div>
    )
}

但这会产生一些错误。我怎样才能解决这个问题？还有其他解决办法吗？提前致谢。

Answer 1

你应该为此使用 jsx ，

const someHtml = (<p>This is a paragraph</p>)

然后将其作为 prop 传递给您的子组件（prop 类型是节点）

<Childcomponent value={someHtml} />

{value}并像子组件中的任何其他变量一样渲染它