React如何将innerHtml添加到动态创建的子元素中

React how to add innerHtml to a dynamically created child element

本文关键字：创建 元素 动态 innerHtml 添加 React      更新时间：2023-09-26

我有一个父组件"Dialog"，如下所示。它引入了另一个需要子反应节点的子组件"DialogBody"。我如何设置动态创建的"child1"div与父'getBodyHtml'(或'this.props.body')的innerHTML ?

class Dialog extends Component {
getBodyHtml () {
    return {
        __html: this.props.body,
    };
}
render () {
var child1 = React.createElement('div', null);
//how to set innerhtml here ??
child1.dangerouslySetInnerHTML({this.getBodyHtml()});
    return (
            {/* children is a required prop of react component */}
            <DialogBody children={child1} />
            </Dialog>
    );

您可以删除强制的children prop并像这样设置dangerouslySetInnerHTML:

render() {
  return (
    <DialogBody dangerouslySetInnerHTML={this.getBodyHtml()}/></Dialog>
  )
}

有关更多信息，请参阅此处的文档

相关文章：