我有一个大型的React应用程序，并且我想从配置或全局级别完全禁用一些组件。在呈现任何组件之前，是否可以使用任何可以调用的全局挂钩？如果是这样，我想我可以检查组件的名称，如果名称在禁用列表中，则返回null。你会怎么做？
答案 0 :(得分：0)
有很多方法可以做到这一点：
React's Context API允许您在组件树的每个级别传递道具，因此您可以将它们用作标记来启用/禁用组件。但是，应谨慎使用。
Higher Order Components基本上只是返回组件的函数。您可以将组件包装在逻辑中以根据需要呈现它们。
或者当然，您可以使用redux之类的全局状态管理器来设置全局状态。
答案 1 :(得分：0)
有很多方法可以做到这一点，因此，我将仅描述一种简单的方法：使用引用并相应地更新状态。
完整的功能在线隐藏/显示沙箱：codesandbox.io ReactJS Feature Hide/Show Demo
定义了两个类，class Feature extends React.Component和class App extends React.Component。 render()的{{1}}是...
<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 />答案 2 :(得分：0)
如果您需要最简单的解决方案，只需使用浏览器全局变量并在render中进行检查即可。
render() {
if( window.globalFlag ) return null
return (
<div> feature content...
缺点：
constructor）（例如componentDidMount）。使用HOC -包装组件-使用Redux或上下文API与全局存储连接。
<FlagsProvider store={flagStore}>
<SomeComponent_1>
<SomeComponent_2>
<FlagsConsumer flag="someFeatureFlag">
<SomeFeatureComponent />
<FlagsConsumer/>连接到存储（redux连接将是一个内部包装器-组成HOC），并有条件地呈现<SomeFeatureComponent />（或为null）。
当然，HOC可以将收到的道具传递给包装的组件-它可以在功能上透明。
不要重新发明轮子-使用一些现成的module，阅读教程，使用google搜索。
HOC还可以起到A / B测试的作用。