reactjs - 如何在 React 中按名称全局禁用/隐藏/替换组件？

Question

我有一个大型 React 应用程序，我有一些组件我想从配置或全局级别完全禁用。在渲染任何组件之前，是否有任何我可以使用的全局钩子被调用？如果是这样，我想我可以检查组件的名称并返回null该名称是否在禁用列表中。你会怎么做？

Answer 1

1. 如果您需要最简单的解决方案，只需使用浏览器全局变量并在渲染中检查它。

   render() { if( window.globalFlag ) return null return ( <div> feature content...

   缺点：

   • 修改组件，
   • 使用全局范围，
   • 一些不必要的代码可以更早（fe constructor）和更晚（fe componentDidMount）运行。

2. 使用 HOC - 包装你的组件 - 使用 redux 或 context API 与全局存储连接。

   <FlagsProvider store={flagStore}> <SomeComponent_1> <SomeComponent_2> <FlagsConsumer flag="someFeatureFlag"> <SomeFeatureComponent />

   <FlagsConsumer/>连接到存储（redux connect 将是一个内部包装器 - 组成 HOC）并有条件地渲染<SomeFeatureComponent />（或 null）。

   当然，HOC 可以将接收到的道具传递给包装的组件——它可以在功能上是透明的。

3. 不要重新发明轮子- 使用一些现成的模块，阅读教程，谷歌适合。

HOC还可以起到A/B测试的作用。

Answer 2

有很多方法可以做到这一点，因此，我将只描述一种简单的方法：使用引用并相应地更新状态。

完整的工作功能在线隐藏/显示沙箱：codesandbox.io ReactJS Feature Hide/Show Demo

定义了两个类，class Feature extends React.Component和class App extends React.Component。render()原因是<Feature/>...

  render() {
    if (!this.state.enabled) {
      return <div />;
    }
    return (
      <div className="Feature">
        <h1>My Feature!</h1>
      </div>
    );
  }

并且启用/禁用功能的选项<App />将像这样处理显示/隐藏......

  handleOnClick(e) {
    if (e.target.checked) {
      this.feature.setState({ enabled: true });
    } else {
      this.feature.setState({ enabled: false });
    }
  }

当然，您需要确保<Feature />具有参考集...

    <Feature
      ref={instance => {
        this.feature = instance;
      }}
    />

Answer 3

有很多方法可以做到这一点：

React 的 Context API允许您通过组件树的每个级别传递道具，因此您可以将它们用作标志来启用/禁用组件。但是应该谨慎使用。

高阶组件基本上只是返回组件的函数。您可以将组件包装在逻辑中以根据需要呈现它们。

或者当然你可以使用像 redux 这样的全局状态管理器来设置全局状态。