React首次加载时默认选中第一个渲染卡片的实现方法

核心思路：不需要模拟DOM点击事件，直接在组件首次挂载、数据加载完成后，主动调用已有的selectData方法传入数组第一项即可，符合React数据驱动的开发逻辑，稳定性更高。

函数组件实现（Hooks，当前主流写法） #

需要搭配useEffect监听数据状态，等data数组加载完成后自动触发选中逻辑，同时补充选中状态存储，方便给选中卡片加视觉高亮样式。
修改后的完整代码如下：

import { useState, useEffect } from 'react';
// 引入你项目里的Label组件
// import Label from 'xxx';

export default function StockCardList() {
  const [data, setData] = useState([]);
  // 存储当前选中的项，用于样式区分
  const [activeItem, setActiveItem] = useState(null);

  // 统一的选中方法，点击和默认选中都复用
  const selectData = (item) => {
    setActiveItem(item);
    // 这里保留你原本选中后需要执行的业务逻辑，比如请求详情、更新数值等
  };

  // 监听data变化，数据首次加载完成时默认选第一个
  useEffect(() => {
    if (data?.length > 0) {
      selectData(data[0]);
    }
  }, [data]);

  return (
    <div className="d-flex">
      {data && data.length > 0
        ? data.map((item) => {
            return (
              <div
                // 去掉多余的空Fragment，给遍历项加唯一key
                key={item.symbol}
                // 选中项加active类名，写对应高亮样式即可
                className={`box-stock ${activeItem?.symbol === item.symbol ? 'active' : ''}`}
                onClick={() => selectData(item)}
              >
                <div className="top-stock skewed p-5">
                  <h1>{item.symbol}</h1>
                  <strong className="text-center">
                    <span> (0.25)</span>
                    {item.stockNum}
                  </strong>
                  <Label className="text-center">
                    EPS:<span className="text-white">{item.EPS}</span>
                  </Label>
                  <Label className="text-center">
                    P/E:<span className="text-white">{item.PE}</span>
                  </Label>
                </div>
              </div>
            );
          })
        : 'no data'}
    </div>
  );
}

类组件实现（老项目兼容写法） #

如果是使用类组件的老项目，把默认选中逻辑放在生命周期里执行即可：

import React from 'react';
// 引入Label组件

class StockCardList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      activeItem: null
    };
  }

  selectData = (item) => {
    this.setState({ activeItem: item });
    // 原有选中业务逻辑
  };

  // 组件挂载时如果data已经存在，直接选第一个
  componentDidMount() {
    if (this.state.data?.length > 0) {
      this.selectData(this.state.data[0]);
    }
  }

  // 如果data是接口异步返回的，等数据加载完成后触发默认选中
  componentDidUpdate(prevProps, prevState) {
    if (prevState.data.length === 0 && this.state.data.length > 0) {
      this.selectData(this.state.data[0]);
    }
  }

  render() {
    const { data, activeItem } = this.state;
    return (
      <div className="d-flex">
        {data && data.length > 0
          ? data.map((item) => {
              return (
                <div
                  key={item.symbol}
                  className={`box-stock ${activeItem?.symbol === item.symbol ? 'active' : ''}`}
                  onClick={() => this.selectData(item)}
                >
                  {/* 内部卡片结构和之前一致 */}
                  <div className="top-stock skewed p-5">
                    <h1>{item.symbol}</h1>
                    <strong className="text-center">
                      <span> (0.25)</span>
                      {item.stockNum}
                    </strong>
                    <Label className="text-center">
                      EPS:<span className="text-white">{item.EPS}</span>
                    </Label>
                    <Label className="text-center">
                      P/E:<span className="text-white">{item.PE}</span>
                    </Label>
                  </div>
                </div>
              );
            })
          : 'no data'}
      </div>
    );
  }
}

export default StockCardList;

避坑提醒 #

• 不要直接在JSX渲染代码里写判断调用selectData，会导致每次重渲染都重复触发方法，甚至引发无限渲染报错
• 不要用原生DOM操作比如document.querySelector('.box-stock').click()模拟点击，不符合React数据驱动的设计逻辑，还容易因为DOM未渲染完成拿到空值报错
• 遍历渲染列表一定要加唯一key属性，优先用数据本身的唯一标识（比如这里的symbol字段），尽量不要只用数组下标，数据顺序变动时会出现渲染异常
• 选中状态必须存在组件state里，否则无法给选中卡片添加高亮样式，用户看不到选中反馈

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