如何使用 FormattedMessage 翻译 MaterialTable reactjs 的 searchPlaceholder答案

【问题标题】：how to translate searchPlaceholder of MaterialTable reactjs using FormattedMessage如何使用 FormattedMessage 翻译 MaterialTable reactjs 的 searchPlaceholder
【发布时间】：2020-04-10 15:58:02
【问题描述】：

我想在Reactjs中翻译ui MaterialTable的searchPlaceholder

我可以像 exportTitle、searchTooltip ... 一样翻译所有内容，除了 searchPlaceholder 我和其他人一样，但他们没有工作。这是代码

const localization = {
    pagination: {
        labelDisplayedRows: '{from}-{to}' + <FormattedMessage id="table.of.label" /> + '{count}'
    },
    toolbar: {
        nRowsSelected: '{0}' + <FormattedMessage id="table.row.label" /> + '(s) selected'
            + <FormattedMessage id="table.selected.label" />,
         searchPlaceholder: <FormattedMessage id="table.search.label" />,
        searchTooltip: <FormattedMessage id="table.search.label" />,
        exportTitle: <FormattedMessage id="table.export.label" />,
    },
    header: {
        actions: <FormattedMessage
            id="table.column.actions"
        />
    },
    body: {
        emptyDataSourceMessage: <FormattedMessage id="table.no_records_to_display.label" />,
        filterRow: {
            filterTooltip: <FormattedMessage id="table.filter.label" />
        },
        addTooltip: <FormattedMessage id="table.add.label" />,
        deleteTooltip: <FormattedMessage id="table.column.actions.delete" />,
        editTooltip: <FormattedMessage id="table.column.actions.edit" />,
    },
    grouping: {
        /* placeholder: <FormattedMessage id="table.drag_headers_here_to_display.label" />, */
    }
};
export default localization;

【问题讨论】：

searchPlaceholder 是什么？你从哪里得到这个密钥的？
它是<FormattedMessage id="table.search.label" />
你的问题解决了吗？直到现在我才在 so chat 中看到你的最后一条消息。
不，它没有解决，我只需要一个用于 searchPlaceholder 的解决方案，我无法更改我的所有解决方案，所有表都共享本地化部分
那么，祝你好运！我建议的解决方案正在发挥作用，它是目前唯一存在的解决方案。

标签： reactjs material-ui material-table

【解决方案1】：

基于材料表中的文档：https://material-table.com/#/docs/features/localization

如果您想更改searchPlaceholder，您应该使用以下内容：

<MaterialTable
    ...
    localization={{
        ...
        toolbar: {
            searchTooltip: 'This is the placeholder text'
        },
      ...
    }}
/>

【讨论】：

【解决方案2】：

有可能，但不能通过FormattedMessage。

material-table 使用@material-ui 组件，而对于搜索部分，他们使用TextField。占位符应该是一个字符串。

要解决您的问题，您需要先格式化占位符，然后再将其提供给材料表。

假设您在树的顶部有一个 IntlProvider 和一个选定的语言环境。

你只需要：

在您的消息定义中添加一条带有一些 id 的自定义消息
使用来自react-intl 的injectIntl HOC 包装呈现材质表的组件。
在材料表本地化中添加searchPlaceholder: intl.formatMessage({ id: "my.custom.searchBar" })。

工作代码：

import { IntlProvider, injectIntl } from "react-intl";
import MaterialTable from "material-table";

const enMessages = {
  "my.custom.searchBar": "search here"
};
const frMessages = {
  "my.custom.searchBar": "rechercher"
};

function TableComponent({ intl }) {
  return (
    <MaterialTable
      columns={[
        { title: "Adı", field: "name" },
        { title: "Soyadı", field: "surname" },
        { title: "Doğum Yılı", field: "birthYear", type: "numeric" },
        {
          title: "Doğum Yeri",
          field: "birthCity",
          lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
        }
      ]}
      data={[
        { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 }
      ]}
      title="Demo Title"
      localization={{
        toolbar: {
          searchPlaceholder: intl.formatMessage({ id: "my.custom.searchBar" })
        }
      }}
    />
  );
}

const LocalizedTable = injectIntl(TableComponent);

export default function App() {
  const [locale, setLocale] = React.useState("en");

  const messages = locale === "en" ? enMessages : frMessages;
  return (
    <IntlProvider locale={locale} messages={messages}>
      <select onChange={e => setLocale(e.target.value)} value={locale}>
        <option value="en">en</option>
        <option value="fr">fr</option>
      </select>
      <div style={{ maxWidth: "100%" }}>
        <LocalizedTable />
      </div>
    </IntlProvider>
  );
}

这是working codesandbox

【讨论】：