接下来-翻译成故事书

Question

I\xc2\xb4m 正在寻找通过 next-translate 将静态文本加载到故事书中的方法。

\n

我的代码看起来像这样，但它 \xc2\xb4s 加载我的语言环境文件，但没有正确编写它们。

\n

这是故事书预览.js：

\n

import '../src/styles/global/global.scss';\n\nimport CssBaseline from '@material-ui/core/CssBaseline';\nimport { ThemeProvider } from '@material-ui/core/styles';\nimport theme from '../src/utils/theme';\nimport I18nProvider from 'next-translate/I18nProvider';\n\nimport commonCS from '../locales/cs/common.json';\n\nexport const decorators = [(Story) => themeDecorator(Story)];\n\nconst themeDecorator = (Story) => {\n    console.log(commonCS.homepage_title);\n    return (\n        <ThemeProvider theme={theme}>\n            <CssBaseline />\n            <I18nProvider lang={'cs-CS'} namespaces={{ commonCS }}>\n                <Story />\n            </I18nProvider>\n        </ThemeProvider>\n    );\n};\n\nexport const parameters = {\n    actions: { argTypesRegex: '^on[A-Z].*' },\n    controls: { expanded: true },\n};\n

\n

这是我的故事书故事：

\n

import React from 'react';\nimport HeaderContact from './HeaderContact';\nimport I18nProvider from 'next-translate/I18nProvider';\nimport useTranslation from 'next-translate/useTranslation';\nimport commonCS from '../../../locales/cs/common.json';\n\nexport default {\n    title: 'HeaderContact',\n    component: HeaderContact,\n};\n\nexport const Basic = () => {\n    const { t } = useTranslation('common');\n    return (\n        <HeaderContact\n            link="mailto:info@numisdeal.com"\n            text={t('homepage_title')}\n        />\n    );\n};\n

\n

我的本地文件common.json：

\n

{\n    "homepage_title": "Blog in Next.js",\n    "homepage_description": "This example shows a multilingual blog built in Next.js with next-translate"\n}\n

\n

和我的翻译配置 i18n.json

\n

{\n    "locales": ["cs", "en", "de"],\n    "defaultLocale": "cs",\n    "pages": {\n        "*": ["common"]\n    }\n}\n

\n

我非常乐意提供帮助。\n谢谢！\nRoman

\n

Answer 1

这是解决方案。

预览.js

import '../src/styles/global/global.scss';

import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/core/styles';
import theme from '../src/utils/theme';
import I18nProvider from 'next-translate/I18nProvider';

import commonCS from '../locales/cs/common.json';

export const decorators = [(Story) => themeDecorator(Story)];

const themeDecorator = (Story) => {
    console.log(commonCS.homepage_title);
    return (
        <ThemeProvider theme={theme}>
            <CssBaseline />
            <I18nProvider lang={'cs'} namespaces={{ common: commonCS }}>
                <Story />
            </I18nProvider>
        </ThemeProvider>
    );
};

export const parameters = {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: { expanded: true },
};

故事：

import React from 'react';

import HeaderContact from './HeaderContact';

export default {
    title: 'HeaderContact',
    component: HeaderContact,
};

export const Basic = () => {
    return <HeaderContact link="mailto:info@numisdeal.com" />;
};

成分：

import React from 'react';
import AlternateEmailIcon from '@material-ui/icons/AlternateEmail';
import useTranslation from 'next-translate/useTranslation';

import styles from './HeaderContact.module.scss';

export interface IHeaderContact {
    link: string;
    text?: string;
}

export default function HeaderContact(props: IHeaderContact) {
    const { link, text } = props;
    const { t } = useTranslation('common');
    const preklad = t('homepage_title');

    return (
        <a href={link} className={styles.headerLink}>
            <AlternateEmailIcon fontSize="small" />
            <span>
                {/* {text} */}
                {preklad}
            </span>
        </a>
    );
}