下一个翻译成故事书
Posted
技术标签:
【中文标题】下一个翻译成故事书【英文标题】:Next-translate to storybook 【发布时间】:2021-07-02 22:46:38 【问题描述】:我正在寻找通过 next-translate 将静态文本加载到故事书中的方法。
我的代码看起来像这样,但它正在加载我的语言环境文件,但没有正确编写它们。
这是故事书 preview.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-CS' namespaces= commonCS >
<Story />
</I18nProvider>
</ThemeProvider>
);
;
export const parameters =
actions: argTypesRegex: '^on[A-Z].*' ,
controls: expanded: true ,
;
这是我的故事书故事:
import React from 'react';
import HeaderContact from './HeaderContact';
import I18nProvider from 'next-translate/I18nProvider';
import useTranslation from 'next-translate/useTranslation';
import commonCS from '../../../locales/cs/common.json';
export default
title: 'HeaderContact',
component: HeaderContact,
;
export const Basic = () =>
const t = useTranslation('common');
return (
<HeaderContact
link="mailto:info@numisdeal.com"
text=t('homepage_title')
/>
);
;
我的本地文件 common.json:
"homepage_title": "Blog in Next.js",
"homepage_description": "This example shows a multilingual blog built in Next.js with next-translate"
还有我的翻译配置 i18n.json
"locales": ["cs", "en", "de"],
"defaultLocale": "cs",
"pages":
"*": ["common"]
我会很高兴得到一些帮助。 谢谢! 罗马
【问题讨论】:
【参考方案1】:这是解决方案。
preview.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>
);
【讨论】:
以上是关于下一个翻译成故事书的主要内容,如果未能解决你的问题,请参考以下文章