如何返回空的tr元素？

Question

我有一些返回tr元素的代码。

const credentialRows = credentials.map((credential_record) => {
    if (
      logic...
    ) {
      const credential_id = credential_record.credential_exchange_id
      const credentialState = credential_record.state.replaceAll('_', ' ') || ''
      const dateCreated =
        new Date(credential_record.created_at).toLocaleString() || ''

      let credentialName = ''
      if (
        credential_record.credential_proposal_dict !== null &&
        credential_record.credential_proposal_dict !== undefined
      ) {
        credentialName = credential_record.credential_proposal_dict.schema_name.replaceAll(
          '_',
          ' '
        )
      }
      return (
        <DataRow
          key={credential_id}
          onClick={() => {
            openCredential(history, credential_id)
          }}
        >
          <DataCell>{credentialName}</DataCell>
          <DataCell className="title-case">{credentialState}</DataCell>
          <DataCell>{dateCreated}</DataCell>
        </DataRow>
      )
    } // missing else here...
  })

tr是tbody的孩子。

<tbody>{credentialRows}</tbody>

它没有问题，但是我得到ESLint警告，上面写着

预期在箭头函数末尾返回一个值

当我试图返回一个空字符串时，它对我大喊大叫，因为它不可能是空的。但是，如果我试图返回一个空的dataRow，它会要求我给它一个键，对于一个虚拟的默认元素，这是我没有的。

创建一个空的tr的最佳方法是什么？

Answer 1

如果您返回null呢？

Answer 2

在if块之后返回<></>。这样，您就可以了解!logic的情况了。或者将if逻辑移出.map()。