React unmount並重新安裝子組件

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在安裝時僅使用“content”prop，因此當父組件的local.use_lang發生更改時，我需要重新呈現組件。

CKEditor可以通過給它一個等於應該強制它重新渲染的值的key prop來強制重新渲染：

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

這樣，只要語言道具發生變化，React就會創建一個新的CKEditor。

請記住，我使用了這個解決方案，因為CKEditor是我用npm安裝的外部組件庫。 如果這是我自己編寫的代碼，我只會更改編輯器如何使用其道具。 但是，由於我拒絕對外部庫代碼進行更改，因此這是允許我強制重新呈現而無需觸及編輯器代碼內部的解決方案。

Answer 2

因為沒有檢測到變化，因此它不會再次調用render() ，因此不會再調用getContent() 。

您可以做的是讓內容成為狀態的一部分（根據您的構造函數，已經是），並在更新use_lang檢入componentWillReceiveProps() 。 如果是這樣，那么你可以通過調用this.setState({...rest, content = getContent()};來更新那里的狀態。

然后你的組件render()函數應該是這樣的

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

（另外，通過調用setState() ，這將依次觸發對render()的調用，如果檢測到任何更改，將顯示更改。但請注意，這實際上並不是“重新安裝”組件，它只是更新視圖。換句話說，在這種情況下更新狀態后不會調用componentWillMount()和componentDidMount()而是調用componentWillUpdate()和componentDidUpdate() ）。 閱讀有關組件生命周期的更多信息