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>

Locale Switcher：

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',
 }
}

的UserList：

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组件下，并在callBack函数中执行此操作.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?

Answer 2

AOR提供了区域设置更改操作（此处为a working example on the demo）：

源代码可在github上找到：marmelab/admin-on-rest-demo

import React from 'react';
import { connect } from 'react-redux';
import { Card, CardText } from 'material-ui/Card';
import RaisedButton from 'material-ui/RaisedButton';
import { translate, changeLocale as changeLocaleAction, ViewTitle } from 'admin-on-rest';

const Configuration = ({ locale, changeLocale, translate }) => (
    <Card>
        <ViewTitle title={translate('pos.configuration')} />
        <CardText>
            <div style={styles.label}>{translate('pos.language')}</div>
            <RaisedButton
                label="en"
                primary={locale === 'en'}
                onClick={() => changeLocale('en')}
            />
            <RaisedButton
                label="fr"
                primary={locale === 'fr'}
                onClick={() => changeLocale('fr')}
            />
        </CardText>
    </Card>
);

const mapStateToProps = state => ({
    locale: state.locale,
});

export default connect(mapStateToProps, {
    changeLocale: changeLocaleAction,
})(translate(Configuration));

Answer 3

因为我不打算将整个项目更改为仅使用Custom App来切换区域设置，所以我最终得到了这个解决方案。

我正在SelectField使用onChange={this.switchToLocale}，因为我收到(event, index, value)。随意使用文档中的示例。重要的部分是reload()功能。

switchToLocale = (event, index, value) => {
    localStorage.setItem('locale', value);
    this.props.changeLocale(value);
    window.location.reload();
};

我对此并不满意，但我认为管理员不会每分钟都改变他的语言环境。

如何进行翻译运行时

3 个答案: