0

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

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) => {。

我希望这是有道理的。

谢谢

4

2 回答 2

0

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

忘了eval……你只能使用返回函数的函数……你可以使用组件作为参数，在其他组件中渲染它，HOC，组合……如果你知道如何（需要更高级的反应知识）……现在接吻。

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

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: {<<< 单括号，对象，不是{[

于 2020-03-31T13:52:28.700 回答
0

您可以通过稍微修改输入数据 ( 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
];
于 2021-08-11T17:16:44.107 回答