MUI-Datatables 列配置转换答案

【问题标题】：MUI-Datatables columns config conversionMUI-Datatables 列配置转换
【发布时间】：2020-07-11 15:21:49
【问题描述】：

我不知道如何根据传递的数据以不同的方式合并数据。这是道具数据....

columns={[
    {
        name: "Fund Name",    //Title
        width: "40%",         //Colum Width
        options: {[           
            customBodyRender: (value, tableMeta, updateValue) => {
                var splitValue = value.split("//");
                return (
                    <div className="fundName">{splitValue[0]}<p>{splitValue[1]}</p></div>
                );
            }
        ]}
    }, {
        name: "Review Date",
        width: "20%"
    }, {
        name: "Company Debt",
        width: "20%"
    }, {
        name: "Alerts",
        width: "10%",
        options: {[
            simpleBodyRender: <Options />
        ]}
    }
}

因此，如果它使用customBodyRender，我希望它做一件事，如果它在做simpleBodyRender，我希望它做的稍有不同。

这里是合并

    let columns = this.props.columns.map(item => {
        item.options
        ? ({ ...item, options: eval(item.options) })
        : item
    });

基本上我希望它看起来更像这样......

let columns = this.props.columns.map(item => {
    if(item.options == "customBodyRenderer"){
        item.options
            ? ({ ...item, options: eval(item.options) })
            : item
        });
    } else if(item.options == "simpleBodyRenderer"){
        item.options
            ? ({ ...item, options: customBodyRender: (value, tableMeta, updateValue) => { eval(item.options) }})
            : item
        });
    }
});

所以如果是customBodyRenderer，它会打印所有内容，但如果是simpleBodyRenderer，它会为用户填写customBodyRender: (value, tableMeta, updateValue) => {。

我希望这是有道理的。

谢谢

【问题讨论】：

标签： reactjs mui-datatable

【解决方案1】：

将组件存储在状态和其他结构中根本不是一个好主意。可行但不推荐。

忘记eval ...您只能使用返回函数的函数...您可以将组件用作参数，将其渲染到其他组件中，HOC，组合...如果你知道如何（需要更高级的反应知识）......现在 KISS。

您可以（？）使用简单的字符串作为来源：

options: {
  simpleBodyRender: "options"
}

...并使用 '.map` 将其转换为所需格式（函数返回组件）：

let columns = this.props.columns.map(item => {
  if(item.options && item.options.simpleBodyRender){
    swith( item.options.simpleBodyRender ) {
      case "options": 
        return { ...item, 
          options: {
            customBodyRender: (value, tableMeta, updateValue) => <Options data={value} /> 
          }
        }
      case "other options": 
        return { ...item, 
          options: {
            customBodyRender: (value, tableMeta, updateValue) => <OtherOptions data={value} /> 
          }
        }
      default: return { ...item, 
          options: {
            customBodyRender: (value, tableMeta, updateValue) => <NotSupportedSimpleBodyRenderer /> 
          }
        }
      }
    }
  }
}

注意：options: { {[

【讨论】：

【解决方案2】：

您可以通过修改一点您的输入数据 (columns) 轻松做到这一点，如下所示：

const data = myInput.map((el) => { return { item: el }; });

然后您将数据作为输入传递给您的 mui-datatable，如下所示：

<MuiThemeProvider theme={getMuiTheme()}>
  <MUIDataTable data={data} columns={columns} options={options} />
</MuiThemeProvider>

在您的列定义中，“名称”是“项目”

所以列可能看起来像这样：

const columns = [
    {
      label: 'myLabel',
      name: 'item',
      options: {
        display: true,
        customBodyRender: (value) => {
          return <p>{value.myData}</p>;
        },
      },
    },
    //other labels here
];

【讨论】：