javascript - 标签文本未在 MUIDataTable ReactJS 中更新

Question

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

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

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

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

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

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

Answer 1

重新渲染Mui-Datatables的最佳方法是更新表的键

键={this.context.language.value}

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

Answer 2

你可以强制 React 组件渲染：

• 有多种方法可以强制 React 组件渲染，但它们本质上是相同的。第一个是 using 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 3

在 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';
            }
        }
    }
]

Answer 4

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

使用自定义函数覆盖默认行渲染。

customRowRender(data, dataIndex, rowIndex) => React 组件