javascript - 如何制作翻译运行时

Question

我正在做一个简单的运行时翻译。当我点击语言环境切换器时，什么也没有发生。如果我刷新页面，标题 已更改。所以，这不是运行时翻译。

翻译图片:

这是我的代码:

管理员:

import { en } from './languages/English';
import { fr } from './languages/French';
const messages = {
 en,
 fr
}
<Admin ... 
  locale={localStorage.getItem('language') ? localStorage.getItem('language') : 'en'}
  messages={messages}
>
 ....
</Admin>

区域切换器:

switchToFrench = () => this.props.changeLocale('fr');
switchToEnglish = () => this.props.changeLocale('en');
switchLanguage(language) {
    localStorage.setItem('language', language);
    this.props.changeLocale(language);
}

render() {
    return (
        <div>
            <div>Language</div>
            <button label="en" onClick={() => this.switchLanguage('en')}>English</button>
            <button label="fr" onClick={() => this.switchLanguage('fr')}>French</button>
        </div>
    );
}

英语/法语文件:

export const en = {
 name: 'English',
 locale: 'en',
 user: {
    no: 'No',
    name: 'Name',
    username: 'User Name',
    email: 'Email',
 }
}
export const fr = {
 name: 'French',
 locale: 'fr',
 user: {
    no: 'No',
    name: 'Nom',
    username: 'Nom d\'utilisateur',
    email: 'Email',
 }
}

用户列表:

class UserList extends Component {
render() {
    const { translate } = this.props;
    return(
        <div>
            <LocaleSwitcher />
            <List title="All users" {...this.props}>
                <Datagrid>
                    <TextField source="id" label={translate('user.no')}/>
                    <TextField source="name" label={translate('user.name')}/>
                    <TextField source="username" label={translate('user.username')}/>
                    <EmailField source="email" label={translate('user.email')}/>
                </Datagrid>
            </List>
        </div>
    )
}
}
export default translate(UserList);

我正在使用 aor 的所有默认组件。请告诉我进行运行时翻译的方法。

Answer 1

您可以将 LocaleSwitcher 组件放在 Admin 组件下，并在回调函数中执行 this.forceUpdate()。这将重新呈现管理组件，正确的语言环境将来自本地存储。像这样:

<Admin ... 
   locale={localStorage.getItem('language') ? 
   localStorage.getItem('language') 
   : 'en'}
   messages={messages}
>
    <LocaleSwitcher onChange={() => this.forceUpdate()}/>
</Admin>

如果你使用 redux，最好使用这个答案中的商店: Changing state/props of root component with Redux?