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

Question

我在 index.tsx 中创建了新的 PublicClientApplication。现在我想将其传递给我的 withAuthHOC。这个 HOC 被 App.tsx 使用。所以我想在 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;

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

How to pass props to HOC from calling component - React + Typescript

typescript

reactjs

msal

higher-order-components

react-props