Question

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

我使用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组件渲染，但是它们本质上是相同的。第一种是使用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

在选项中使用 customRowRender 功能并根据语言来操纵表格

使用自定义功能覆盖默认行呈现。

customRowRender（data，dataIndex，rowIndex）=> React组件

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中更新

4 个答案: