javascript - react : How to pass html as prop

Question

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

该组件将如下所示:...etc render{return{ <div> {this.props.htmldata} </div>}} 。我必须将 htmldata 分配给什么属性返回 div 内的一些 HTML。我的目标是在 mdx 文件中使用不同的 htmldata 轻松使用相同的组件无需创建另一个组件。

编辑:我建议使用返回 html 并作为 prop 绑定(bind)和传递的函数。示例:

constructor(props) {
super(props);

this.state = {

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

}这个函数作为 prop 传递，如下所示:

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

Answer 1

如果你想通过 props 放置 JSX(html)，通常最好使用 props.childern

React js - documentation (about props childern)

或者你可以使用dangerouslySetInnerHTML

Reactjs - dangerouslysetinnerhtml