reactjs - 有什么方法可以根据 prop 值动态显示每个索引的标题

Question

我有一个要显示的表格，对于我们有嵌套表格的每一行，点击数字，嵌套表格将被展开。因此，我们为每个嵌套表头设置了标题，我们正在映射并显示它。

现在棘手的部分是 ex：对于嵌套标题标题“a”，特定的索引行将在道具“show_column”中具有布尔值的属性。如果列值为假，那么我们只需要从标题中隐藏特定列。

无论如何我们可以为每一行动态显示。

我试图使用地图，但卡住了我该如何处理它。

从这里下面的代码，titles 是嵌套的表头值，它们被映射。Row 将从 prop 值映射。在最后一次返回中，我们显示了表格标题和表格行。

//structure of props would be like as below

heads: {full_name: "Member name", premiumType: "Premium type", class_id: "Class", location_department: "Location", effective_date: "Effective date", …}
**members: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]**
onColumnSort: ƒ ()
onPageChange: ƒ ()
pagination: {records: 550, offset: 0, limit: 10}
sortBy: {columns: {…}, direction: -1}
total: {grand: 8294.77, details: Array(15)}
//and the nested member details of props as below
members: Array(10)
0: {premium_type: "Premium", member_name: "ADDRESS, SPOUSEADD R", class_cd: "0019", location: "", effective_date: "", …}
1: {premium_type: "Premium", member_name: "ALAPAI, ANGLE", class_cd: "0001", location: "", effective_date: "", …}

//members props
  members: Array(10)
0:
class_cd: "0019"
coverage_info: [{…}]
effective_date: ""
location: ""
memb_seq_nr: "1"
member_name: "ADDRESS, SPOUSEADD R"
new_member_added: false
premium_adjustment: false
premium_type: "Premium"
reason: ""
show_plan_column: false
**show_volume_column: false**
total_premium: "8.00"

const titles = [
  { title: a, size: 40 },
  { title: b, size: 20 },
  { title: c, size: 10 },
  { title: d, size: 20 },
  { title: e, size: 10 },
];

const head = titles.map((th, i) => {

  return <th key={i} style={{ width: `${th.size}%` }}><FormattedMessage {...th.title} /></th>;
});

const rows = details.map((item, i) => {

  return <tr key={i}>
    <td>{item.coverage_name}</td>
    <td>{item.volume}</td>
    <td>{item.family_indicator}</td>
    <td>{this.getNumber(item.new_premium)}</td>
    <td>{this.getNumber(item.current_premium)}</td>
  </tr>
})

return <Table className="details"><thead>{head}</thead><tbody>{rows}</tbody></Table>

}

标签： reactjs