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}一样呈现

Answer 2

我不建议您这样做，但是如果您知道自己在做什么，则可以使用dangerouslySetInnerHTML属性。因此，您的ChildComponent应该类似于

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

但是，就像我说的那样，我不建议您这样做，因为它可能容易受到XSS攻击。您可以在React Docs

中找到更多信息。

Answer 3

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

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

Eliran提出了一种方法，但子组件再次期望一种称为值的道具。

还有另一种方式，即“子级”，您可以在其中以html格式将其喷入子级组件。

例如

head

以及组件本身。...

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

已阅读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的链接。

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

4 个答案: