在React/JSX中优雅地处理条件渲染：使用null返回空元素

问题描述与常见挑战

在react开发中，我们经常需要根据特定条件来渲染列表中的部分元素。例如，在一个组件中，我们可能通过array.prototype.map()方法遍历一个数据数组，并为每个满足条件的项生成一个jsx元素（如<tr>或<div>）。然而，当某些项不满足渲染条件时，如何处理map函数中的“else”分支，常常会引发一些困扰。

考虑以下场景，一个map函数根据内部逻辑决定是否渲染一个DataRow组件（它最终渲染为HTML的<tr>）：

const credentialRows = credentials.map((credential_record) => {
    if (
      credential_record.state === 'active' && // 示例逻辑
      credential_record.credential_proposal_dict !== null
    ) {
      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 = credential_record.credential_proposal_dict?.schema_name.replaceAll('_', ' ') || '';

      return (
        <DataRow
          key={credential_id}
          onClick={() => { /* ... */ }}
        >
          <DataCell>{credentialName}</DataCell>
          <DataCell className="title-case">{credentialState}</DataCell>
          <DataCell>{dateCreated}</DataCell>
        </DataRow>
      );
    }
    // else 分支缺失
});

// 在渲染中：
// <tbody>{credentialRows}</tbody>

这种代码会立即引发ESLint警告，例如“Expected to return a value at the end of arrow function”，因为它在if条件不满足时没有明确的返回值。为了解决这个问题，开发者可能会尝试：

1. 返回空字符串 ('')： React/JSX通常不允许在需要元素的地方直接返回空字符串，这会导致渲染错误或警告。
2. 返回一个空的JSX元素 (<></> 或 <DataRow />)： 如果返回一个空的DataRow，React会要求为其提供一个key属性。然而，对于一个不应该被渲染的“占位”元素，我们往往没有一个有意义的key。

这些尝试都无法优雅地解决问题，反而引入了新的复杂性或错误。

解决方案：返回 null

在React中，处理条件渲染的最佳实践是当你不希望渲染任何内容时，直接返回null。React会忽略null、undefined和布尔值（true、false），这意味着它们不会被渲染到DOM中。

将上述代码修改为在条件不满足时返回null，可以完美解决ESLint警告和渲染问题：

const credentialRows = credentials.map((credential_record) => {
    if (
      credential_record.state === 'active' && // 示例逻辑
      credential_record.credential_proposal_dict !== null
    ) {
      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 = credential_record.credential_proposal_dict?.schema_name.replaceAll('_', ' ') || '';

      return (
        <DataRow
          key={credential_id}
          onClick={() => { /* ... */ }}
        >
          <DataCell>{credentialName}</DataCell>
          <DataCell className="title-case">{credentialState}</DataCell>
          <DataCell>{dateCreated}</DataCell>
        </DataRow>
      );
    }
    // 当条件不满足时，返回 null
    return null;
});

// 在渲染中：
// <tbody>{credentialRows}</tbody>

通过返回null，credentialRows数组中将包含有效的JSX元素和null值。当React渲染<tbody>{credentialRows}</tbody>时，它会自动跳过所有的null值，只渲染那些实际返回了DataRow组件的项。这不仅解决了ESLint警告，也避免了不必要的DOM元素渲染和key属性的困扰。

Rustic AI

AI驱动的创意设计平台

108

查看详情

注意事项与最佳实践

1. null vs undefined： 尽管undefined也能达到不渲染的效果，但在表示“无内容”或“不渲染”时，null是更常用的约定和更明确的语义选择。

2. 过滤数组 vs 条件返回null：

   • 条件返回null： 适用于条件逻辑相对简单，且不影响数组长度或索引的场景。它的优点是代码直接，易于理解每个原始数据项对应的渲染逻辑。
   • 先过滤数组，再map： 如果需要渲染的项是原始数组的一个子集，并且希望生成的数组只包含要渲染的元素，那么先使用filter方法过滤原始数组，然后再使用map进行渲染，可能是更清晰的选择。

   // 示例：先过滤再 map
   const activeCredentialRows = credentials
     .filter(credential_record => 
       credential_record.state === 'active' && 
       credential_record.credential_proposal_dict !== null
     )
     .map((credential_record) => {
       const credential_id = credential_record.credential_exchange_id;
       // ... 其他逻辑
       return (
         <DataRow key={credential_id} onClick={() => { /* ... */ }}>
           {/* ... */}
         </DataRow>
       );
     });
   
   // <tbody>{activeCredentialRows}</tbody>

   登录后复制

   选择哪种方式取决于具体的业务逻辑和个人偏好。如果过滤条件复杂，或者你希望map的结果数组只包含有效的JSX元素，filter会更合适。如果条件渲染是map内部的一个简单分支，直接返回null则更简洁。

3. 可读性： 明确的if...else return null;结构使得代码意图清晰，易于维护。

总结

在React/JSX中处理条件渲染，尤其是在map函数内部，当不希望渲染某个元素时，最优雅且符合React规范的方法是直接返回null。这不仅能解决ESLint的警告，还能确保React正确地忽略这些“空”项，避免在DOM中创建不必要的元素，同时保持代码的整洁和可维护性。根据具体场景，开发者也可以考虑在map之前使用filter来预处理数据，以达到类似的效果。

以上就是在React/JSX中优雅地处理条件渲染：使用null返回空元素的详细内容，更多请关注php中文网其它相关文章！