React 卸载并重新装载子组件

Question

我有一个npm导入的组件(CKEditor(，它只关心其父组件在挂载时的状态。 也就是说，无论父组件的状态发生什么变化，如果CKEditor已经挂载，它都不会反映这些变化。

这对我来说是一个问题，因为当父组件更改其语言属性时，我需要 CKEditor 根据父组件的状态进行更改。

有没有办法使子组件卸载并从父组件再次装载？例如，有没有办法根据父组件的"componentWillReceiveProps"卸载并再次挂载子组件？

    import React from 'react';
    import CKEditor from "react-ckeditor-component";
    export default class EditParagraph extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                // an object that has a different html string for each potential language
                content: this.props.specs.content,
            }
            this.handleRTEChange = this.handleRTEChange.bind(this)
            this.handleRTEBlur = this.handleRTEBlur.bind(this)
        }
        /**
         * Native React method 
         *  that runs every time the component is about to receive new props.
         */
        componentWillReceiveProps(nextProps) {
            const languageChanged = this.props.local.use_lang != nextProps.local.use_lang;
            if (languageChanged) {
                // how do I unmount the CKEditor and remount it ???
                console.log('use_lang changed');
            }
        }
        handleRTEChange(evt) {
            // keeps track of changes within the correct language section
        }
        handleRTEBlur() {
            // fully updates the specs only on Blur
        }
        getContent () {
            // gets content relative to current use language
        }
        render() {
            const content = this.getContent();
            // This is logging the content relative to the current language (as expected), 
            // but CKEditor doesn't show any changes when content changes.
            console.log('content:', content);
            // I need to find a way of unmounting and re-mounting CKEditor whenever use_lang changes.
            return (
                <div>
                    <CKEditor 
                        content={content} 
                        events={{
                            "blur": this.handleRTEBlur,
                            "change": this.handleRTEChange
                        }}
                    />
                </div>      
            )
        }
    }

Answer 1

由于 CKEditor 在挂载时只使用"内容"属性，因此我需要在父组件的local.use_lang发生变化时重新渲染组件。

CKEditor可以通过给它一个key道具来强制它重新渲染，该属性等于应强制它重新渲染的值：

<CKEditor key={this.props.local.use_lang} etc />

这样，每当语言道具发生变化时，React 都会创建一个新的 CKEditor。

请记住，我使用了这个解决方案，因为 CKEditor 是我使用 npm 安装的外部组件库。如果这是我正在使用的自己的代码，我只会更改编辑器使用其 props 的方式。但是，由于我拒绝更改外部库代码，因此该解决方案允许我强制重新渲染，而无需接触编辑器代码的内部。

Answer 2

这是因为没有检测到更改，因此它不会再次调用render()，因此不会再次调用getContent()。

您可以做的是让内容成为状态的一部分(根据您的构造函数，已经是状态(，并componentWillReceiveProps()签入use_lang是否更新。如果是这样，那么您可以通过调用 this.setState({...rest, content = getContent()}; 来更新那里的状态。

然后你的组件render()函数应该看起来像这样

<CKEditor 
    content={this.state.content} 
    events={{
        "blur": this.handleRTEBlur,
        "change": this.handleRTEChange
    }}
/>

(顺便说一句，通过调用setState()，这将反过来触发对render()的调用，如果检测到任何更改，将显示更改。但请注意，这实际上并不是"重新挂载"组件，它只是更新视图。换句话说，在这种情况下更新状态后不会调用componentWillMount()和componentDidMount()。相反，将调用componentWillUpdate()和componentDidUpdate()(。在此处阅读有关组件生命周期的更多信息