时间戳

首页 > 解决方案 > 如何设置有条件的多个细节面板？

javascript - 如何设置有条件的多个细节面板？

问题描述

我想有多个详细信息面板，但不知道先验有多少。于是我想到了传递取值为true或false的属性（expandibleDetails和showParameters）：如果为真我要面板，如果为假不。问题是，如果我因为属性值为“false”而渲染 null，material-table 会给出错误“m-table-body-row.js:221 Uncaught TypeError: Cannot read property 'render' of null”。

detailPanel={expandibleDetails ? [{
  tooltip: "Show Details",
  render: (rowData) => {
    return (
      <div
        style={{
          display: 'flex',
          height: '250px',
        }}
      >
        <Textarea
          id={`${ rowData.tableData.id }-details`}
          value={rowData.details}
        />
      </div>
    );
  },
}, showParameters ? {
  tooltip: "Show parameters",
  render: (rowData) => {
    return (
      <div>
        <Textarea
          id={`${rowData.tableData.id}-parameters`}
          value={rowData.parameters}
        />
      </div>
    );
  },
} : null] : []}

之后，我设置了一个不做任何事情但面板图标仍然出现的渲染方法，我不想要相关面板......

detailPanel={expandibleDetails ? [{
  tooltip: "Show Details",
  render: (rowData) => {
    return (
      <div
        style={{
          display: 'flex',
          height: '250px',
        }}
      >
      <Textarea
        id={`${ rowData.tableData.id }-details`}
        value={rowData.details}
      />
    </div>
  );
},
}, showParameters ? {
  tooltip: "Show parameters",
  render: (rowData) => {
  return (
    <div>
      <Textarea
        id={`${rowData.tableData.id}-parameters`}
        value={rowData.parameters}
      />
    </div>
  );
},
} : {render: () => {} : []}

另外这段代码似乎很难读，有没有办法让它变得更好？我没有找到办法，我创建了一个外部函数，然后传递给 detailPanel 但我得到了错误......

const detailedArray = () => {
  let arr= [];
  if (expandibleDetails) {
    arr.push({
      tooltip: "Show Details",
      render: (rowData) => {
        <div
          style={{
            display: 'flex',
            height: '250px',
            }}
          >
          <Textarea
            id={`${ rowData.tableData.id }-details`}
            value={rowData.details}
          />
        </div>
      },
    });
  }
  if (showParameters) {
    arr.push(...)
  }
  return arr;
};


detailPanel={detailArray}

同时，感谢任何可以帮助我的人

标签： javascriptreactjsmaterial-table

解决方案

好的，我找到了方法。我张贴它以防有人需要它。我使用了扩展运算符，以便在为真的情况下获取一个对象，或者在为假的情况下获取任何对象。

detailPanel={expandibleDetails ? [{
  tooltip: "Show Details",
  render: (rowData) => {
    return (
      <div
        style={{
          display: 'flex',
          height: '250px',
        }}
      >
      <Textarea
        id={`${ rowData.tableData.id }-details`}
        value={rowData.details}
      />
    </div>
  );
},
}, 
...(showParameters ? [{
  tooltip: "Show parameters",
  render: (rowData) => {
  return (
    <div>
      <Textarea
        id={`${rowData.tableData.id}-parameters`}
        value={rowData.parameters}
      />
    </div>
  );
},
}] : {}),

推荐阅读