如何将道具从调用组件传递给 HOC - React + Typescript

Question

我在 index.tsx 中创建了新的 PublicClientApplication。现在我想把它传递给我的 withAuthHOC。 App.tsx 正在使用此 HOC。所以我想在 HOC 中使用 PublicClientApplication（pca 道具）。我该怎么做？

我的 AppProps.tsx：

export type AppProps = {
    pca: IPublicClientApplication
  };

我的 index.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;