标签文本未在 MUIDataTable ReactJS 中更新答案

【问题标题】：标签文本未在 MUIDataTable ReactJS 中更新
【发布时间】：2026-02-01 22:50:01
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： javascript reactjs material-ui mui-datatable

【解决方案1】：

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

key={this.context.language.value}

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

【讨论】：

【解决方案2】：

你可以强制 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 });
}

【讨论】：

感谢您的回答！但是状态正在起作用，我尝试更改数据和标题，正如您所看到的，最后一个随着上下文而变化并且它起作用了。但我无法更改选项，我不明白为什么。

【解决方案3】：

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

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

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

【讨论】：

感谢您的回答！我只想更改 textLabels 选项。我可以更改数据道具和标题道具。但我无法更改选项道具

【解决方案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';
            }
        }
    }
]

【讨论】：