ReactJS渲染添加条件判断 实现仅数据存在时展示表格的方法

你可以在组件return之前编写条件分支逻辑，同时建议先对数据源做兜底处理，避免传入undefined时访问属性报错，修改后代码如下：

import React from 'react';
import {Card, Col, Row } from 'react-bootstrap';

function Int(props: any) {
    // 兜底处理，保证拿到的一定是数组
    const calendarPlanned: any[] = props.calendarPlannedData || [];

    // if else 条件判断
    if (calendarPlanned.length === 0) {
        // 无数据时返回空结构或者自定义空提示
        return (
            <Card>
                <Card.Body>
                    <div>暂无计划数据</div>
                </Card.Body>
            </Card>
        )
    } else {
        // 有数据时渲染完整表格内容
        return (
            <Card>
                <Card.Body>
                   {calendarPlanned.map((planned) => (
                        <Col xs={12} lg={12} className="no-gutters" key={planned.id}>
                            <Row>
                                <Col
                                    xs={3}
                                    lg={3}
                                    className="no-gutters"                             
                                >
                                    {planned.plannedDate}
                                </Col>
                                <Col
                                    xs={2}
                                    lg={2}
                                    className="d-flex"
                                >
                                </Col>
                                <Col
                                    xs={7}
                                    lg={7}
                                    className="d-flex"
                                >
                                    <strong
                                        className="d-block text-truncate"          
                                    >
                                       {planned.stepName}
                                    </strong>
                                </Col>
                            </Row>
                        </Col>
                    ))}
                </Card.Body>
            </Card>
        );
    }
}

export default Int;

你可以根据业务场景选择更简洁的写法，都可以实现空数组时不执行多余渲染：

• 短路运算方案：利用JS逻辑与的短路特性，仅当数组存在且有值时才执行map遍历
  代码示例：

  <Card.Body>
    {/* 加可选链避免数据源为undefined时报错 */}
    {calendarPlanned?.length && calendarPlanned.map((planned) => (
      // 原有渲染逻辑保持不变
    ))}
  </Card.Body>
  

• 三元运算符方案：可以同时自定义无数据时的提示内容，灵活度更高
  代码示例：

  <Card.Body>
    {calendarPlanned?.length ? (
      calendarPlanned.map((planned) => (
        // 原有渲染逻辑保持不变
      ))
    ) : (
      <div>暂无计划数据</div>
    )}
  </Card.Body>
  

• 空数组兜底方案：如果不需要显示空状态提示，只要将数据源兜底为空数组即可，空数组执行map会返回空数组，React会自动忽略空数组的渲染，不会执行多余遍历逻辑
  代码示例：

  // 定义时直接兜底为数组
  const calendarPlanned: any[] = props.calendarPlannedData || [];
  // 直接调用map即可，数组为空时不会渲染任何内容
  return (
    <Card>
      <Card.Body>
        {calendarPlanned.map((planned) => (
          // 原有渲染逻辑保持不变
        ))}
      </Card.Body>
    </Card>
  )
  

内容的提问来源于stack exchange，提问作者Greg-A