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

Posted 2023-02-19

【中文标题】如何将道具从调用组件传递给 HOC - React + Typescript

【英文标题】：How to pass props to HOC from calling component - React + Typescript

【发布时间】：2022-01-10 17:45:35

【问题描述】：

我在 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;

【问题讨论】：

您好，我有一个类似问题的答案，希望对您有所帮助：How to set one component's state from another component in React

【参考方案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;