反应：如何将 html 作为道具传递

Question

我想创建一个组件，用作<Component htmldata=? /> <Component htmldata=? />在一个 mdx 文件中。

该组件将是这样的： ...etc render{return{ <div> {this.props.htmldata} </div>}} 。 我必须分配htmldata属性以返回 div 内的一些 HTML。 我的目标是使用不同的htmldata在 mdx 文件中轻松地多次使用相同的组件，而无需创建另一个组件。

编辑：我建议使用一个返回 html 并被绑定并作为道具传递的函数。 例子：

constructor(props) {
super(props);

this.state = {

  linkfunction: this.props.link.bind(this)
}

这个函数是作为一个道具传递的：

<LiveCode title="MyhtmlComponent" link={function(){return <p>the html i pass </p> ;}} />

Answer 1

如果你想把 JSX(html) 通过道具，通常最好使用 props.childern

React js - 文档（关于 props childern）

或者你可以使用危险的SetInnerHTML

Reactjs - 危险地setinnerhtml

Answer 2

您可以使用dangerouslySetInnerHTML但不建议这样做

在这里阅读更多

https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html