在高阶组件中是否可以从HOC渲染上的渲染中排除某些包装的组件

问题描述

我学习React并有一个问题。我有4个React Component，它们是同一HOC的使用者。我希望其中一个不要Consume从HOC渲染。

这有可能吗？在包装组件或HOC中，它在哪里做？

HOC提供商：

render() {
    const { currentUser } = this.props;
    return (
        <AuthUserContext.Provider value={authUser}>
            <Component {...this.props} />
        </AuthUserContext.Provider>
    );
}

消费者之一：

  <AuthUserContext.Consumer>
    {authUser =>
      authUser ? (
        <NavigationAuth authUser={authUser} />
      ) : (
        <NavigationNonAuth />
      )
    }
  </AuthUserContext.Consumer

之所以我希望一个组件不使用HOC渲染，是因为HOC在App.js中像这样export default withAuthentication(App);

进行了初始化

const App = () => (
  <Router>
    <div>
      <Navigation />

      <hr />

      <Route exact path={ROUTES.LANDING} component={LandingPage} />
      <Route path={ROUTES.SIGN_UP} component={SignUpPage} />
      <Route path={ROUTES.SIGN_IN} component={SignInPage} />
      <Route
        path={ROUTES.PASSWORD_FORGET}
        component={PasswordForgetPage}
      />
      <Route path={ROUTES.HOME} component={HomePage} />
      <Route path={ROUTES.ACCOUNT} component={AccountPage} />
      <Route path={ROUTES.ADMIN} component={AdminPage} />
    </div>
  </Router>
);

export default withAuthentication(App)

App.js仅在启动时呈现一次，对吗？因此，它不需要HOC的额外渲染，因此我想防止这种情况。

更新这是一个 Codesandbox，直接指向具有withAuthentication(App);包装器的App.js。

您会看到，withAuthentication提供商每次都引发所有“消费者”解雇，如果您需要value也可以。但是您会在App.js中看到<Navigation />组件已呈现，并且它还具有一个<AuthUserContext.Consumer>。

因此，withAuthentication渲染时发生的情况是App，js也被渲染，并且不需要。

我在withAuthentication中做了一些类似的代码，以使App.js仅呈现一次：

render() {
    const { currentUser } = this.props;
    let { authUser,once } = this.state;
    // ALl changes to user object will trigger an update
    if (currentUser) authUser = currentUser;
    const renderAuthButton = () => {
        if (once) {
            this.state.once = false;
            return (
                <AuthUserContext.Provider value={authUser}>
                    <Component {...this.props} />
                </AuthUserContext.Provider>
            );
        }
        return (
            <AuthUserContext.Provider value={authUser}>
                <Component />
            </AuthUserContext.Provider>
        );
    };
    return <div>{renderAuthButton()}</div>;
}

但是我觉得这可能不是一个好主意，或者甚至不是一个坏主意。 App.js是否可以这样渲染，因为它可以渲染整个应用程序树

我学习React，所以我可能会完全不在这里，请指教！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

consumer higher-order-functions reactjs reactjs