React如何在页面加载时自动触发.map渲染元素的绑定函数

核心约束满足：不通过给选中状态设置state初始值的方式实现预选中，完全复用已有的onClick点击逻辑，页面加载完成后自动触发目标项的选中效果，和用户手动点击的行为逻辑完全一致。

方案1：通过ref触发原生DOM点击事件（最贴合真实点击行为） #

这个方案完全模拟用户手动点击的DOM事件，哪怕你的onClick逻辑依赖事件对象（比如获取点击目标、阻止冒泡等）也能正常运行，不需要修改原有点击逻辑的代码。
实现步骤：

• 用useRef创建一个数组，存储每个列表渲染项的DOM节点
• 列表通过.map()渲染时，给每个项绑定ref，和列表项的索引/唯一ID一一对应
• 在useEffect（组件挂载、DOM全部渲染完成的钩子）中，找到需要预选中的目标项对应的DOM节点，调用原生click()方法触发绑定的onClick事件

示例代码：

import { useState, useRef, useEffect } from 'react';

// 示例列表数据
const nameList = ['张三', '李四', '王五', '赵六', '孙七'];
// 需要预选中的项索引，示例默认选中第三项「王五」
const PRE_SELECT_TARGET_INDEX = 2;

export default function NameCardList() {
  // 选中状态不设初始值，符合要求
  const [activeName, setActiveName] = useState();
  // 存储所有卡片的DOM引用
  const cardRefs = useRef([]);

  // 原有点击处理逻辑，不需要做任何修改
  const handleCardClick = (name) => {
    setActiveName(name);
  };

  useEffect(() => {
    const targetElement = cardRefs.current[PRE_SELECT_TARGET_INDEX];
    // 确认DOM存在后触发点击
    if (targetElement) targetElement.click();
  }, [nameList]); 
  // 如果列表是异步加载的，把列表数据加到依赖数组里，等数据渲染完再触发

  return (
    <div className="page-container">
      <div className="card-group">
        {nameList.map((name, index) => (
          <div
            key={name}
            // 把当前项DOM存入ref数组对应位置
            ref={node => cardRefs.current[index] = node}
            className="name-card"
            onClick={() => handleCardClick(name)}
          >
            {name}
          </div>
        ))}
      </div>
      <div className="result-bar">
        当前选中姓名：{activeName || '暂未选中'}
      </div>
    </div>
  );
}

方案2：useEffect中直接调用点击处理函数（无DOM操作，更简洁） #

如果你的点击处理逻辑不依赖事件对象e，不需要操作DOM属性，可以直接在useEffect里调用已经写好的点击处理函数，传入目标项的参数即可，不需要额外绑定ref，代码更轻量。
只需要把方案1里的useEffect替换成下面的代码即可：

useEffect(() => {
  // 直接传入预选中项的参数，复用原有点击逻辑
  handleCardClick(nameList[PRE_SELECT_TARGET_INDEX]);
}, [nameList]);

注意事项 #

不要在组件的渲染主流程里直接调用点击处理函数，会导致状态更新时机错乱，甚至触发渲染死循环。所有自动触发的逻辑必须放在useEffect中执行，保证DOM和组件状态都准备完成后再运行。
如果列表存在动态增删、排序的场景，ref要和列表项的唯一ID绑定，不要单纯依赖数组索引，避免触发错位的项。

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