reactjs - 如何分离成单独的组件

Question

我正在尝试将第一个和第二个输出到单独的文件中，但由于存在钩子 useTranslation，它不起作用，

我如何输出第一个和第二个以分离组件？

export const Admin: FunctionComponent = () => {
    const { t } = useTranslation(['adminPage', 'button']);

    const first = [
        <Resource
            options={{label: t('adminPage:dashboard')}}
            name='dashboard'
            list={first}
        />,
    ];

    const second = [
        <Resource
            options={{label: t('adminPage:dashboard')}}
            name='dashboard'
            list={second}
        />,
    ]

    const getResources = (roles: TRoles) => {
        const resources = [
            ...first,
            ...second
        ];
        return Promise.resolve(resources);
    };

    return (
        <div>
            <ReactAdmin
                authProvider={authProvider}
                loginPage={AdminSignIn}
                dataProvider={dataProvider}
                logoutButton={() => <AdminLogoutButton>{t('button:logout')}</AdminLogoutButton>}
                history={history}
                theme={theme}
            >
                {getResources}
            </ReactAdmin>
        </div>
    );
};

标签： reactjsreact-admin