如何从调用组件传递道具到HOC-React Typecript

Question

我在索引中创建了新的PublicClientApplication。tsx。现在我想把这个传递给我的withAuthHOC。该应用程序正在使用此HOC。tsx。所以我想在HOC中使用PublicClientApplication（pca道具）。我怎么做？

我的AppProps。tsx：

export type AppProps = {
    pca: IPublicClientApplication
  };

我的索引。tsx：

const msalInstance = new PublicClientApplication(msalConfig);

ReactDOM.render(
  <React.StrictMode>
    <App pca={msalInstance} />
  </React.StrictMode>,
  document.getElementById('root')
);

我的App.tsx：

  const App = ({pca}:AppProps) => {
  return (
      <MainRoutes />
  );
}

export default withAuthHOC(App);

我的名字是withAuthHOC。tsx：

const withAuthHOC = (WrappedComponent: React.FunctionComponent) => {
    return () => {
        useMsalRedirect();

        return (
            <MsalProvider instance={pca}>
                <AuthenticatedValidation />
                <AuthenticatedTemplate>
                    <WrappedComponent />
                </AuthenticatedTemplate>
            </MsalProvider>
        );
    }
};

export default withAuthHOC;

Answer 1

你将在HOC的道具上得到它

const withAuthHOC = (WrappedComponent: React.FunctionComponent) => {
    return (props) => {

        const {pca} = props; // get pca form props

        useMsalRedirect();

        return (
            <MsalProvider instance={pca}>
                <AuthenticatedValidation />
                <AuthenticatedTemplate>
                    <WrappedComponent />
                </AuthenticatedTemplate>
            </MsalProvider>
        );
    }
};

export default withAuthHOC;