反应如何将innerHtml添加到动态创建的子元素

Question

Ive got a parent component "Dialog" that looks like the below. It pulls in another child component "DialogBody" that requires a child react node. How can i set the innerHTML of the dynamically created "child1" div versus the parent 'getBodyHtml' (or the '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

You could remove the compulsory children prop and set dangerouslySetInnerHTML like this:

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

For more info, refer to the docs here