我有点新反应，并坚持如何有条件地将布局应用于组件，有人可以帮忙吗？
type Page<T = {}> = NextPage<T> & {
layout?: React.ComponentType;
};
export default Page;
const MyPage:Page = () => {
const { isAuthenticated } = useAuth();
return (.....
};
MyPage.layout = isAuthenticated ? Layout1 : Layout2; //how to do such ??
export default MyPage;
提前致谢
您本身无法执行此操作，因为您无法isAuthenticated从组件外部访问变量。
您将需要有两个组件：一个组件具有Layout1布局，第二个组件具有Layout2布局，并从MyPage组件中动态选择要加载的组件。
记录的
import Layout1 from '...';
const Logged: Page = () => <div>Logged in</div>;
Logged.layout = Layout1;
export default Logged;
NotLogged.ts
import Layout2 from '...';
const NotLogged: Page = () => <div>Please log in</div>;
NotLogged.layout = Layout2;
export default NotLogged;
MyPage.ts
import Logged from './Logged';
import NotLogged from './NotLogged';
const MyPage = () => {
const { isAuthenticated } = useAuth();
return isAuthenticated ? <Logged /> : <NotLogged />;
};
export default MyPage;
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句