如何与表ANTD一起使用React-I18Next

Question

我有一个使用antd创建的表组件：

import { Table } from "antd";

const dataSource = [
  {
    key: "1",
    name: "Mike",
    age: 32,
    address: "Downing Street"
  },
  {
    key: "2",
    name: "John",
    age: 42,
    address: "Downing Street"
  }
];

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  }
];

const CustomTable = () => {
  return (
    <>
      <Table dataSource={dataSource} columns={columns} />
    </>
  );
};

export default CustomTable;

现在我想将翻译添加到每个列 name。我希望在react-i18next

使用此库的一个简单示例是以下代码：

const {t} = useTranslation();

t('textToTranslate');

此外，我还有一些翻译。价值类似：

{
  "name": "name",
  "age": "age"
}

如何将翻译添加到每个列 - ＆gt; 名称？

Answer 1

您可以更改生成列的方式，并将翻译用作典型的React Prop：

const dataSource = [
  {
    key: "1",
    name: "Mike",
    age: 32,
    address: "Downing Street"
  },
  {
    key: "2",
    name: "John",
    age: 42,
    address: "Downing Street"
  }
];

const columns = [
  {
    title: "tableHeadings.name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "tableHeadings.age",
    dataIndex: "age",
    key: "age"
  },
  {
    title: "tableHeadings.address",
    dataIndex: "address",
    key: "address"
  }
];

const CustomTable = () => {
  const { t } = useTranslation();

  return (
    <>
      <Table dataSource={dataSource}>
        {columns.map((column) => (
          <Table.Column
            key={column.key}
            title={t(column.title)}
            dataIndex={column.dataIndex}
          />
        ))}
      </Table>
    </>
  );
};

export default CustomTable;

Answer 2

您可以使用的另一种方法是将列作为Props传递给您的可定制组件，然后将翻译添加到标题中，如下所示：

const CustomTable = ({ columns }) => {
const { t } = useTranslation();

const tColumns = columns.map((column) => ({
    ...column,
    title: t(`${column.title}`),
  }));

return (
  <>
    <Table dataSource={dataSource} columns={tColumns} />
  </>
 );
};

export default CustomTable;