Question

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

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>
    );

Answer 1

您可以删除强制children道具并设置dangerouslySetInnerHTML，如下所示：

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

有关详细信息，请参阅文档here

回答如何将innerHtml添加到动态创建的子元素

1 个答案: