MUIDataTable ReactJS 中的标签文本未更新

Question

我想在 mui 数据表中添加多语言选项。我可以更改翻译，但是当我想更改语言时，我尝试给另一个对象提供其他翻译（这个对象如果我做控制台日志我可以看到更改）但是标签文本没有改变。

我使用 contextProvider 来更改所选语言，然后获取带有翻译的特定词典。

是一个 class 组件，所以我用正确的提供者做了一个静态 contextType。

有没有可能用其他选项或类似的东西重新渲染元素？

options = {
 textLabels: this.context.translation.dataTables.textLabels
};

return(
 <MUIDataTable
   title={this.context.language.value}
   data={data}
   columns={columns}
   options={options}
 />
);

Answer 1

你可以强制 React 组件渲染：

有多种方法可以强制 React 组件渲染，但它们本质上是相同的。第一个是使用 this.forceUpdate()，它会跳过 shouldComponentUpdate:

someMethod() {
    // Force rendering without state change...
    this.forceUpdate();
}

假设您的组件有一个状态，您还可以调用以下内容：

someMethod() {
    // Force rendering with a simulated state change
    this.setState({ state: this.state });
}

Answer 2

在选项中使用customRowRender函数并根据语言

操作table

使用自定义函数覆盖默认行呈现。

customRowRender(data, dataIndex, rowIndex) => 反应组件

Answer 3

re-render Mui-Datatables 的最佳方法是更新 table

的密钥

键={this.context.language.value}

<MUIDataTable
   key={this.context.language.value}
   title={this.context.language.value}
   data={data}
   columns={columns}
   options={options}
 />

Answer 4

在 MUIDataTable 中，我们可以在创建列时通过在 MUIDataTableColumnDef 选项中提供标签来覆盖标签名称。

示例：

const columns: MUIDataTableColumnDef[] = [
    {
        name: 'Id',
        label: 'ID',
        options: {
            download: false,
            customBodyRenderLite: (index: number) => {
                const desc: Description = evenMoreAbout[index]
                return <BasicInfo obj={desc} setIconClicked={setIconClicked} />
            }
        }
    },
    {
        name: 'id',
        label: 'ID',
        options: {
            display: 'excluded',
            download: true,
            customBodyRender: desc => desc.id
        }
    }]

即使我们仍然想使用 customHeadLabelRender 在某些数据条件下覆盖标签名称...我们可以像下面的示例一样

const columns: MUIDataTableColumnDef[] = [
    {
        name: 'Id',
        label: '',
        options: {
            download: false,
            customBodyRenderLite: (index: number) => {
                const desc: Description = evenMoreAbout[index]
                return <BasicInfo obj={desc} setIconClicked={setIconClicked} />
            },
            customHeadLabelRender: (dataIndex: number, rowIndex: number) => {
                return 'ID';
            }
        }
    }
]

MUIDataTable ReactJS 中的标签文本未更新

Label text not updating in MUIDataTable ReactJS

javascript

reactjs

material-ui

mui-datatable