如何在ReactJS中将HTML作为道具传递

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

我不建议这样做，但如果你知道你在做什么，你可以使用dangerouslySetInnerHTML道具。所以，你的ChildComponent应该是这样的

function ChildComponent(props) {
  return <div dangerouslySetInnerHTML={props.value} />
}

但是，就像我说的，我不建议这样做，因为它可能容易受到XSS攻击。你可以在React Docs找到更多信息

Answer 2

你应该使用jsx，

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

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

<Childcomponent value={someHtml} />

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

Answer 3

我认为这种方法是错误的。

首先，应该为更改的值或来自API的数据保留状态。我不会说html代码段应该是应用程序状态的一部分。

Eliran提出了一种方法，但同样，子组件期望一个名为值的道具。

还有另一种方法，即“儿童”，你可以将html喷射到儿童组件。

EG

<Childcomponent value={somePropToPassDown}>
    <p>This is a paragraph</p>
</ChildComponent>

并在组件本身....

const ChildComponent= (props) => {
    return (
        <div>
            <p>{props.value}</p>
            {props.children}
        </div>
    )
}

阅读有关React Children的这篇文章，其中有更详细的解释

Answer 4

不要将值设置为字符串，而是可以使用html元素设置动态包装文本的值。

constructor(props) {
 super(props);
 this.state = {
  value: ''
 }
}

componentDidMount = async () => {
 this.setState({
  value: <p>This is a paragraph</p>
 })
}

通过这种方式，您可以动态设置和呈现html元素。

你也可以使用危险的内部html。以下是参考资料https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html的链接。