reactjs - React Pluggable - 卸载插件时组件不会从 DOM 中删除

Question

TodoPlugin.tsx 在安装时呈现组件。

import React, { Component } from "react";
import { IPlugin, PluginStore } from "react-pluggable";
import Todos from "../components/todo/Todos";
import MainTodo from "../components/todo/MainTodo";

class TodoPlugin implements IPlugin {
  namespace = "Todo";

  pluginStore!: PluginStore;

  getPluginName(): string {
    return `${this.namespace}@1.0.0`;
  }
  getDependencies(): string[] {
    return [];
  }

  init(pluginStore: PluginStore): void {
    this.pluginStore = pluginStore;
  }

  TodoComponent = () => {
    return <MainTodo />;
  };

  activate(): void {
    this.pluginStore.executeFunction(
      "Renderer.add",
      "Todo.todos",
      this.TodoComponent
    );
  }
  deactivate(): void {
    this.pluginStore.removeFunction("Todo.todos");
  }
}

export default TodoPlugin;

Test.tsx，它在按钮单击时安装和卸载 Todo 插件。

const onLogin = (event: any) => {
    pluginStore.install("Todo");
  };

  const onLogout = (event: any) => {
   pluginStore.uninstall("Todo");
  };
return (
    <>
      <button id="login" onClick={onLogin}>
        Login
      </button>

      <button
        id="logout" onClick={onLogout}
      >
        Logout
      </button>


      <Renderer placement={"Todo.todos"} />
    </>
  );

单击 Logout 按钮时，放置 Todo.todos 的组件没有被删除，如果我再次单击 Login 按钮，则会在第一个组件之后创建并呈现一个新组件。

标签： reactjs

Answer 1

在您的停用功能中，您尚未从渲染器中删除组件。您可以通过以下代码段删除组件，而不是删除“Todo.todo”：

this.pluginStore.executeFunction(
      "Renderer.remove",
      "Todo.todos",
);