react-draft-wysiwyg编辑器通过外部props更新内容不生效怎么解决？

我尝试从调用组件向封装的Editor组件传递内容更新，通过props传递文本到受控编辑器ControlledEditor，但当props更新时，编辑器内的文本并未同步变更。

初始代码 #

调用组件代码 #

<ControlledEditor htmlContent={this.state.validationResultContent}/>

初始ControlledEditor组件代码 #

export class ControlledEditor extends Component {
    constructor(props) {
        super(props);
        this.state = {editorState: EditorState.createWithText(this.props.htmlContent)};
    }

    onEditorStateChange = (editorState) => {
        this.setState({ editorState })
    };

    render() {
        const { editorState } = this.state;
        return (
            <>
                <Container className="mt-5">
                    <Row>
                        <Editor
                            editorState= {editorState}
                            onEditorStateChange={this.onEditorStateChange}
                            wrapperClassName="demo-wrapper"
                            editorClassName="demo-editor"
                        />
                    </Row>
                </Container>
            </>
        );
    }
}

ControlledEditor.propTypes = {
    htmlContent: PropTypes.string
}

补充说明 #

• 使用的是基于Draft.js封装的react-draft-wysiwyg富文本编辑器
• 需要渲染的内容为HTML格式，因此要对代码做适配调整
• 通过componentDidUpdate生命周期监听props变化即可解决核心问题

最终可运行代码 #

export class ControlledEditor extends Component {
    constructor(props) {
        super(props);
        this.state = {editorState: EditorState.createEmpty()}
    }

    componentDidUpdate(prevProps) {
        if (this.props.htmlContent !== prevProps.htmlContent) {
            this.setState({
                    editorState: EditorState.createWithContent(ContentState.createFromBlockArray(convertFromHTML(this.props.htmlContent)))
            });
        }
    }

    onEditorStateChange = (editorState) => {
        this.setState({editorState})
    };

    render() {
        const {editorState} = this.state;
        return (
            <>
                <Container className="mt-5">
                    <Row>
                        <Editor
                            editorState={editorState}
                            wrapperClassName="demo-wrapper"
                            editorClassName="demo-editor"
                            onEditorStateChange={this.onEditorStateChange}
                        />
                    </Row>
                </Container>
                <Container className="mt-5">
                    <Row>
                        <div dangerouslySetInnerHTML={{__html: this.props.htmlContent}}/>
                    </Row>
                </Container>
            </>
        );
    }
}

ControlledEditor.propTypes = {
    htmlContent: PropTypes.string
}

内容的提问来源于stack exchange，提问作者robob