如何使用 MUI-Data-Tables 呈现列内的项目数组？答案

【问题标题】：如何使用 MUI-Data-Tables 呈现列内的项目数组？
【发布时间】：2020-02-23 03:46:08
【问题描述】：

我有要使用 MUI-Data-Table 组件在数据表中显示的文本列表，但我面临的问题是在列中显示的不是单个项目，而是项目列表。我有一个名为系统的项目。它包含一个国家/地区数组，所以我只想在一个列中显示该数组，但我不知道该怎么做。

这是我的 json：

systeme:{
          archived: 0
           id: 1
           nomSysteme: "Environnement Tn"
           systeme_country: Array(1)
                   {
                    0: {id: 1}
                   length: 1
                     }
        }

这就是我自定义专栏的方式，因为我需要遵循某种模式：

 {
    name: "titre",
    label: "Titre",
    options: {
        filter: true,
        sort: false,
    }
},
{

    name: "theme.systeme.systeme_country",
    label: "Countries",
    options: {
        filter: true,
        sort: false,

    }
},

要获得更多解释，选项名称必须与 json 中的名称相同，并且它只呈现一个对象，但 theme.systeme.system_country 是我想要显示的一组国家/地区的 ID，但它不会让我没有'不知道如何自定义我的列来做这样的事情，或者我是否可以做一个技巧来实现它

【问题讨论】：

标签： reactjs mui-datatable

【解决方案1】：

您可以为指定字段提供customBodyRender。可以在这里找到一个例子：https://github.com/gregnb/mui-datatables/blob/master/examples/component/index.js

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import MUIDataTable from "mui-datatables";

function App() {
  const data = [{ user: "john", langs: ["en", "de", "fr"] }];
  const columns = [
    { name: "user" },
    {
      name: "langs",
      options: {
        customBodyRender: (value, tableMeta, updateValue) => (
          <div>{value.join(",")}</div>
        )
      }
    }
  ];
  return <MUIDataTable data={data} columns={columns} />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【讨论】：

我可以把过滤器不放在数据表里面而是放在外面吗，就像改变它的渲染位置
如何只显示数组中对象的第一个元素，即 children[0].childName
您的意思是要渲染的列表的第一个元素？
如果我把 customBodyRender: () => {} 设置为空参数可以吗？
如果您不需要value, tableMeta, updateValue 之一，它应该可以工作

【解决方案2】：

另外，你可以只返回你想要的字符串（不需要在 div 中）

  const colData = (colArrayData: any) => {
        return colArrayData.map((item: any) => item.name).join(", ")
  }


  const columns = [
    { name: "user" },
    {
      name: "langs",
      options: { customBodyRender: (colArrayData: any) => colData(colArrayData) },
    }
  ];

【讨论】：