Question

我正在使用React-admin并遵循他们给出的演示。到目前为止，除了选项卡名称/标题翻译之外，其他所有功能都可以正常工作。我正确完成了翻译，因为具有 label 属性的其他组件可以很好地进行翻译。

翻译是从{"healthy":false,"message":"health_check failed: OK"}%文件中获取的，并根据 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的大写字符串。

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

Answer 1

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

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

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

Answer 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);

重要的是将组件与翻译连接并从道具获得翻译功能以完成翻译工作。

React-admin选项卡名称翻译

2 个答案: