表格中条件显示span元素的优化实现方法问询

可以通过两种方式简化重复逻辑：

1. 封装通用字段显示组件 #

把非空判断和渲染逻辑抽成独立组件，后续直接复用即可：

const FieldDisplay = ({ label, value }) => {
  if (!value) return null;
  return (
    <span className="d-block">
      <b>{label}: </b>{value}
    </span>
  );
};

然后在表格单元格里直接调用：

<Td>
  <span>
    <FieldDisplay label="State" value={claim.state} />
    <FieldDisplay label="Comment" value={claim.comment} />
  </span>
</Td>

<Td>
  <span>
    <FieldDisplay label="Something" value={claim.something} />
    <FieldDisplay label="Another" value={claim.another} />
  </span>
</Td>

2. 用配置数组批量渲染 #

如果某列的字段较多，可以把字段配置成数组，通过map批量生成元素，进一步减少重复代码：

// 定义每列的字段配置
const column1Fields = [
  { label: "State", key: "state" },
  { label: "Comment", key: "comment" }
];

const column2Fields = [
  { label: "Something", key: "something" },
  { label: "Another", key: "another" }
];

然后在单元格中渲染：

<Td>
  <span>
    {column1Fields.map(({ label, key }) => (
      <FieldDisplay key={key} label={label} value={claim[key]} />
    ))}
  </span>
</Td>

<Td>
  <span>
    {column2Fields.map(({ label, key }) => (
      <FieldDisplay key={key} label={label} value={claim[key]} />
    ))}
  </span>
</Td>

这样不管多少列多少字段，只需要维护配置数组和通用组件，再也不用重复写{claim.x && (...)}的判断逻辑了。

内容的提问来源于stack exchange，提问作者Whoopcg