React-admin 选项卡名称翻译答案

【问题标题】：React-admin tab name translateReact-admin 选项卡名称翻译
【发布时间】：2018-10-02 09:53:59
【问题描述】：

我正在使用 React-admin 并按照他们提供的演示进行操作。到目前为止，除了选项卡名称/标题翻译外，一切正常。我已正确完成翻译，因为具有 label 属性的其他 components 可以正常翻译。

根据 react-admin 文档，翻译从 en.js 文件中获取并添加到 app.js。

这是我的代码：

class TabbedDatagrid extends React.Component {
  tabs = [
      { id: 'countries', name: 'root.countries.title' },
      { id: 'languages', name: 'root.languages.title' },
  ];
  state = {  countries: [], languages: [] };

  static getDerivedStateFromProps(props, state) {
      if (props.ids !== state[props.filterValues.status]) {
          return { ...state, [props.filterValues.status]: props.ids };
      }
      return null;

  }

  handleChange = (event, value) => {
      const { filterValues, setFilters } = this.props;
      setFilters({ ...filterValues, status: value });
  };

  render() {
      const { classes, filterValues, ...props } = this.props;
      return (
          <Fragment>
              <Tabs
                  fullWidth
                  centered
                  value={filterValues.status}
                  indicatorColor="primary"
                  onChange={this.handleChange}

              >
                  {this.tabs.map(choice => (
                      <Tab
                          key={choice.id}
                          label={choice.name}
                          value={choice.id}
                      />

                  ))}
              </Tabs>
              <Divider />
              <Responsive
                  small={<SimpleList primaryText={record => record.title} />}
                  medium={
                      <div>                           
                          {filterValues.status === 'countries' && (
                                <Datagrid hover={false}
                                   {...props}
                                   ids={this.state['countries']}
                                   >
                                    <TextField source="id" />
                                    <TextField source="name"  label="root.countries.fields.name"/>
                                </Datagrid>
                                )}
                            {filterValues.status === 'languages' && (

                           <Datagrid hover={false}

                              {...props}

                              ids={this.state['languages']}

                              >

                               <TextField source="id" />

                              <TextField source="name"  label="root.languages.fields.name"/>

                           </Datagrid>
                       )}
                      </div>

                  }

              />

          </Fragment>

      );

  }

}

除了Tab 标签之外，翻译似乎在其他任何地方都有效，我得到的是这个root.countries.title 的大写字符串而不是标题。

是否有解决方法或如何解决此问题？

【问题讨论】：

翻译是从合并到 app.js 文件中的 en.js 文件中获取的，它没有从状态中获取值

标签： reactjs react-admin

【解决方案1】：

您可能从material-ui“直接”使用了<Tab/>。

您需要使用（创建）此组件的“增强版”（使用translate prop）。

从menu 或其他可翻译组件中汲取灵感。

【讨论】：

【解决方案2】：

您需要将您的翻译传递给您的 App.js，如下所示：

import React from 'react';
import { Admin, Resource } from 'react-admin';
import frenchMessages from 'ra-language-french';
import englishMessages from 'ra-language-english';

const messages = {
    fr: { component:{label:'test'},...frenchMessages },
    en: { component:{label:'test'},...englishMessages },,
}
const i18nProvider = locale => messages[locale];

const App = () => (
    <Admin locale="en" i18nProvider={i18nProvider}>
        ...
    </Admin>
);

export default App;

当你想在组件中使用翻译时，你需要将它连接到 react-admin 的翻译功能，如下所示：

import { TextInput, translate } from 'react-admin';

const translatedComponent = ({translate, ...props}) => {
return <TextInput label={translate('component.label')} />
}

export default translate(translatedComponent);

将组件与 translate 连接并从 props 中获取 translate 函数以进行翻译工作非常重要。

【讨论】：