反應：如何將 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