React 卸载并重新挂载子组件

2024-02-20

我有一个 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>      
            )
        }
    }

由于 CKEditor 在安装时仅使用“content”属性,因此当父组件的 local.use_lang 发生更改时,我需要重新渲染组件。

CKEditor 可以通过给它一个强制重新渲染keyprop 等于应强制其重新渲染的值:

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

这样,每当 language prop 发生变化时,React 都会创建一个新的 CKEditor。

请记住,我使用此解决方案是因为 CKEditor 是我使用 npm 安装的外部组件库。如果我正在使用我自己的代码,我只需更改编辑器使用其道具的方式即可。但是,由于我拒绝对外部库代码进行更改,因此这是允许我强制重新渲染而无需触及编辑器代码内部的解决方案。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React 卸载并重新挂载子组件 的相关文章

随机推荐

  • 如何在 Alexa 中使用带有意图确认的意图链?

    我正在尝试混合对话管理和意图链 我已禁用自动委派 但我被困在 当用户填写所有槽值时 我使用意图确认并提示他数据是否正确 如果用户说 否 我想出于同样的目的重新启动对话管理 但我得到的错误是 指令 Dialog Delegate 只能在对话框
  • Google Cloud Functions Java 11(测试版)运行时 - 性能问题

    我使用 Java 11 测试版 运行时创建了一个新的 Cloud Function 来处理静态站点的 HTML 表单提交 这是一个简单的 3 字段表单 姓名 电子邮件 消息 不涉及文件上传 该函数主要做两件事 使用 BitBucket 创建
  • Foreach 循环中的 PHP 引用对象

    假设我有这些课程 class Foo public data public function addObject obj this gt data objects obj class Bar public data public funct
  • “Docker On Windows”是否启动Linux虚拟机?

    我知道旧的 Docker Toolbox 使用 VirtualBox 为 Docker 运行一个最小的 Linux 虚拟机boot2docker http boot2docker io 这是一个最小的轻量级Linux操作系统 现在 随着新W
  • C++函数体中的常量变量

    我相信我已经理解了 但我只是想确认 如果我有两个功能 function A const Vector3D vectorA 1 0f function B float var const Vector3D vectorB 1 0f var 在
  • GTM 脚本后 dataLayer.push 不起作用

    我想使用 Google 跟踪代码管理器实施增强型电子商务 并且希望为标签 Universal Analytics 推送一些数据 我总是在 GTM 脚本之前创建 dataLayer 但现在我需要使用以下命令发送更多数据dataLayer pu
  • 处理 PDO::prepare() 添加的引号

    根据 PHP 文档 PDO prepare 为所有参数添加引号 这样您就不必担心这样做 准备好的语句的参数不需要加引号 驱动程序会自动处理此问题 如果应用程序专门使用准备好的语句 则开发人员可以确保不会发生 SQL 注入 但是 如果查询的其
  • 如何支持“按请求”范围

    我想从中间件获取用户令牌并将其注入控制器 这可能吗 class TaskController inject private currentUser Post tasks addTask if hasPermission currentUse
  • 在 MATLAB 中将绘制的数据与颜色和尺寸源链接起来

    这个问题与发布的问题相关here https stackoverflow com questions 45527467 visualizing large 3d dataset with scatter plot 其中我概述了我在仿真期间在
  • 在 yiimongodbsuite 中更新插入嵌入文档

    我需要在 yiimongodbsuite 中执行 upsert 命令 我试过 model new Murls model gt userid userid model gt title title model gt edits 0 new
  • 为什么 Future 的 andThen 不链接结果?

    The andThen这意味着我从中学到了answer https stackoverflow com a 20292526 2210478是一个函数作曲家 比如说 f andThen g andThen h 将等于 h g f x 这意味
  • 如何通过代理设置 libGDX 项目

    我正在使用 libgdx 项目创建器 gdx setup jar 设置一个新项目 但是 我在 Windows 计算机上使用代理连接来访问互联网 并且 gdx setup jar 无法检测到设置 因此我无法下载所需的 jar 文件并生成任何项
  • Hyperledger Composer 中的链代码与 Hyperledger Fabric 中的链代码?

    在 Hyperledger Composer 中使用 javascript 编写链代码是否可以实现与在 Hyperledger Fabric 中使用 go 编写链代码相同的功能 与用 go 编写链代码相比 用 JS 编写链代码有哪些限制和好
  • 如何将会话从一台 Tomcat 服务器转移到另一台?

    我们有一个用于网店的 Tomcat 服务器 当用户登录时 我们需要将用户转移到另一个 安全 服务器 以下是详细说明 1 我们有两台 Tomcat 服务器 一台 常规 HTTP 和一台安全 HTTPS 2 用户最初访问常规服务器 3 当他们登
  • 使用 Rails、MySQL 和 Active Record 查询 where date = Date.today

    我在 Active Record 文档中看到 您可以使用大于 小于比较来查询日期 但是 如果您想选择 where date Date today 或者我必须查询 date 大于昨天且小于明天的情况该怎么办 正如您所看到的 我在以下查询中正是
  • 从 Shiny (R) 下载 png

    我对 Shiny 和 R 还很陌生 并且正在努力将我在 Shiny 中制作的情节导出到 png 文件 我查看了这两个线程 但无法弄清楚 保存在闪亮的应用程序中制作的绘图 https stackoverflow com questions 1
  • Adobe AIR - 带图像的自定义预加载器

    Folks 我设计了一个Adobe AIR应用 我想展示一些preloader在它打开之前 任何人都可以指导我的教程preloader 专门针对 AIR或者任何已经内置的 Thanks 借助 AIR 我可以想出几种方法来实现这一目标 1 使
  • go + cgo 和链接

    我想使用以下 c 作为 Go 的 cgo include
  • 如何使用 javascript 在 selenium 中设置网络节流?

    如何使用 selenium 和 javascript 在 chrome 中设置网络节流设置 我也花了一些时间才弄清楚这一点 但这似乎对我有用 driver await new Builder forBrowser engine usingS
  • React 卸载并重新挂载子组件

    我有一个 npm 导入的组件 CKEditor 它只关心其父组件在安装时的状态 也就是说 无论父组件的状态发生什么变化 如果父组件已经挂载 CKEditor 都不会反映这些变化 这对我来说是一个问题 因为当父组件更改其语言属性时 我需要 C