我在 index.tsx 中創建了新的 PublicClientApplication。現在我想把它傳遞給我的 withAuthHOC。App.tsx 正在使用此 HOC。所以我想在 HOC 中使用 PublicClientApplication (pca props)。我該怎么做？
我的 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;
uj5u.com熱心網友回復：
你會在 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;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/373489.html