React - 如何更改材料ui的DataTable组件属性的语言？答案

【问题标题】：React - How to change the language of DataTable component properties of material ui?React - 如何更改材料ui的DataTable组件属性的语言？
【发布时间】：2021-12-12 22:35:52
【问题描述】：

我正在使用一个名为 DataTable 的 Material ui 组件，问题是过滤器字段是英文的，我想知道是否有任何方法可以将其语言更改为葡萄牙语

在我的组件代码下方：

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { PropTypes } from 'prop-types';

export default function DataTable({ rows, columns }) {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
      />
    </div>
  );
}

DataTable.propTypes = {
  rows: PropTypes.arrayOf(
    PropTypes.shape({
      conteudo: PropTypes.string,
      disciplina: PropTypes.string,
      curso: PropTypes.string,
      data: PropTypes.string,
    })
  ).isRequired,
  // eslint-disable-next-line react/forbid-prop-types
  columns: PropTypes.array.isRequired,
};

我想将“unsort, sort by Desc, Filter, Hide...”翻译成英文

【问题讨论】：

标签： reactjs datatable translate

【解决方案1】：

您可以通过将localeText 对象道具传递给DataGrid 来本地化DataGrid 上的任何文本标签，如下所示：

import { useState } from "react";
import { DataGrid } from "@mui/x-data-grid";

const localizedTextsMap = {
  columnMenuUnsort: "não classificado",
  columnMenuSortAsc: "Classificar por ordem crescente",
  columnMenuSortDesc: "Classificar por ordem decrescente",
  columnMenuFilter: "Filtro",
  columnMenuHideColumn: "Ocultar",
  columnMenuShowColumns: "Mostrar colunas"
};

export default function DataTable({ rows, columns }) {
  const [finalClickInfo, setFinalClickInfo] = useState(null);

  const handleOnCellClick = (params) => {
    setFinalClickInfo(params);
  };

  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
        onCellClick={handleOnCellClick}
        localeText={localizedTextsMap}
      />
      {finalClickInfo &&
        `Final clicked id = ${finalClickInfo.id}, 
        Final clicked field = ${finalClickInfo.field}, 
        Final clicked value = ${finalClickInfo.value}`}
      {!finalClickInfo && `Click on a column`}
    </div>
  );
}

所有可以本地化的键都列出了here。您可以查看 this sandbox 以获取此用法的实时工作示例。

【讨论】：

我什至不知道如何感谢你，我一直在寻找这个几个世纪，非常感谢你的到来
非常感谢。你知道如何使用这个吗？ footerTotalVisibleRows: (visibleCount, totalCount) => ${visibleCount.toLocaleString()} de ${totalCount.toLocaleString()},

【解决方案2】：

只是在需要时帮助某人。（同时更改 dataGrid 页脚）

在我的 .jsx 中我添加了：

import { DataGrid, **ptBR** } from "@mui/x-data-grid";
<DataGrid localeText={ptBR.props.MuiDataGrid.localeText}

结果是：

支持的语言环境： https://material-ui.netlify.app/zh/components/data-grid/localization/

【讨论】：