Question

我有一个大的下拉列表（包含 100 个元素），每个下拉列表都会显示不同的表格（也有 100 个类型）。因此，我的代码如下：

const typeA =[
  {
    Header: "性别",
    accessor: "_source.aa",
    className: "t-cell-1 text-left"
  },
  {
    Header: "年龄",
    className: "t-cell-1 text-left",
    accessor: "lastRecord.bb"
  }
]
const typeA1 =[
  {
    Header: "名字",
    accessor: "_source.firstname",
    className: "t-cell-1 text-left"
  },
  {
    Header: "姓氏",
    className: "t-cell-1 text-left",
    accessor: "lastRecord.lastname"
  }
]
const typeA100 =[
  {
    Header: "身高",
    accessor: "_source.height",
    className: "t-cell-1 text-left"
  },
  {
    Header: "体重",
    className: "t-cell-1 text-left",
    accessor: "lastRecord.weight"
  }
]

在渲染部分，我像这样做：

return (
<Styles>
:isTypeA1? <Table columns={TypeA1} data={data} />
:isTypeA2? <Table columns={TypeA2} data={data} />
...
:isTypeA100? <Table columns={TypeA100} data={data} />
</Styles>
)

我想问一下，是否有任何方法可以缩短代码行数，因为头部部分的代码太多了，而且它们在整体上非常相似。

更新 20210813 我现在使用的组件是复选框，并将来会改成下拉列表，而复选框的代码如下：

constructor(props) {
super(props);
this.state = {

  isTypeA1: false,
};
}
toggleCheck = () => {
this.setState({
  isTypeA1: !this.state.isTypeA1,
});
}

<div>
  <input
    type="checkbox"
    name="myCheckBox1"
    checked={this.state.isTypeA1}
    onClick={this.toggleCheck}
  />
  测试 chk box</div>

谢谢。 Jeff

如何在 React 表格中以适当 / 干净的方式处理大量的 if..then 情况？

0 个答案: