React-admin имя вкладки перевести

Question

Я использую React-admin и следую демонстрации, которую они выдают.Пока что все работает, кроме названия вкладки / перевода названия.Я сделал перевод правильно, потому что другие компоненты с атрибутом label отлично работают с переводом.

Переводы поступают из файла en.js и добавляются в app.js в соответствии с документацией реагировать-admin .

Вот мой код:

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.

Есть ли обходной путь или как решить эту проблему?

Answer 1

Вам необходимо передать свои переводы в файл 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;

чем когда вы хотите использовать переводы внутри компонента, вам необходимо подключить его к функции переводаact-admin какследует:

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

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

export default translate(translatedComponent);

важно связать компонент с переводом и получить функцию перевода из реквизита, чтобы получить работу перевода.

Answer 2

Вы, вероятно, использовали <Tab/> 'напрямую' из material-ui.

Вам необходимо использовать (создать) «расширенную версию» (используя translate prop) этого компонента.

Получите вдохновение из меню или других переводимых компонентов.