如何通过 HOC 调用传递道具

Question

所以这是我的问题。我在我的 React 路由器中使用 HOC。所以它看起来像这样：

    <BrowserRouter>
      <div className="main__container">
        <Route exact path="/" component={authHOC(MainView)} />
        <Route path="/article" component={authHOC(Article)} />
        <Route path="/apps" component={authHOC(AppList)} />
      </div>
    </BrowserRouter>

现在，我想将一些道具传递给我的包装组件。我想要这样的东西：

component={authHOC(Article({ header: true })}

所以将道具传递给我的组件。以上行不通。有没有办法通过？

我的 HOC 组件如下所示：

export default function(ProtectedComponent, addProps) {
  return class LoginPage extends Component {

    checkUserAuth = async() => {
      const token = await api.getAuthToken();
      this.setState({ isUserLoggedIn: !!token, loading: false });
    };

    redirectToAuth = () => <Redirect to="/login" />;

    render() {
      const { isUserLoggedIn, loading } = this.state;

      if(!loading) {
        return isUserLoggedIn ? (
          <ProtectedComponent {...this.props} {...addProps} />
        ) : this.redirectToAuth();
      }

      return null;
    }
  };
}

Answer 1

不应像Article({ header: true }) 那样直接调用组件，除非this is done on purpose。

高阶组件可以接受一个组件和被包装组件使用的附加参数，如the guide所示，例如：

<Route exact path="/" component={authHOC(MainView, { header: true })} />

和

const authHOC = (Comp, props) => <Comp {...props}/>;

如果authHOC是无法修改的第三方HOC，应提供增强组件：

<Route exact path="/" component={
  authHOC(props => <MainView {...props} header={true} />)
} />