React中如何在指定HTML Div内渲染JSX组件？

方案一：用状态控制条件渲染（推荐） #

React是数据驱动的，没必要直接操作DOM引用，通过状态就能实现把<Details/>渲染到点击的div内部：

1. 新增状态存储当前点击的项索引：

const [activeIndex, setActiveIndex] = useState(null);

2. 修改点击事件和渲染逻辑：

function Results(props) {
  const [results, setResults] = useState([]);
  const [activeIndex, setActiveIndex] = useState(null); // 新增状态

  useEffect(() => {
    setResults(getResults(props.season));
  }, [props.season]);

  return (
    <>
      {results.map((elem, index) => (
        <div 
          key={index} 
          onClick={() => setActiveIndex(index === activeIndex ? null : index)} // 点击切换激活状态
        >
          {elem}
          {/* 只有当前点击的div才渲染Details */}
          {activeIndex === index && <Details />}
        </div>
      ))}
    </>
  );
}

点击某个div时，该div的索引会存入activeIndex，对应的div内部就会渲染<Details/>；再次点击可取消渲染，逻辑更贴合React的数据流设计。

方案二：获取每个div的DOM引用（仅当需要直接操作DOM时使用） #

如果确实需要获取每个div的DOM引用，不能用单个useRef——循环中它会被不断覆盖，最后只保留最后一个元素的引用。需要用useRef创建数组来存储所有引用：

1. 创建引用数组：

const divRefs = useRef([]);

2. 在map循环中为每个div绑定对应索引的引用：

function Results(props) {
  const [results, setResults] = useState([]);
  const divRefs = useRef([]); // 存储所有div的引用

  useEffect(() => {
    setResults(getResults(props.season));
  }, [props.season]);

  const handleClick = (index) => {
    const targetDiv = divRefs.current[index];
    // 此处可直接操作目标div的DOM，比如手动插入内容
    console.log(targetDiv);
  };

  return (
    <>
      {results.map((elem, index) => (
        <div 
          key={index} 
          onClick={() => handleClick(index)}
          ref={(el) => divRefs.current[index] = el} // 为每个div绑定对应索引的引用
        >
          {elem}
        </div>
      ))}
    </>
  );
}

注意：若results数组长度动态变化，需注意清理过时的引用以避免内存泄漏。

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