React组件中map循环生成的div id无法隐藏的原因与解决办法

这是个很典型的React和jQuery混合使用时的时机冲突+HTML规范问题，咱们一步步拆解：

为什么会出现这种现象？ #

1. React渲染时机晚于jQuery执行时机 #

你的$(window).on('load', ...)是在页面所有资源（图片、样式等）加载完成后触发的，但如果props.list的数据是异步获取的（比如从后端接口请求），React组件会在window.load事件触发之后才完成列表的渲染。这时候jQuery的$('#oneb').hide()已经执行过了，自然没法作用到后续才生成的#oneb元素上。

2. 重复ID违反HTML规范 #

HTML要求页面上的id属性必须是唯一的，但你通过map循环生成了多个带id="oneb"的div，这本身就是无效的HTML。jQuery用$('#oneb')只会选中DOM中第一个匹配该id的元素——哪怕后续生成了更多同名id的元素，也不会对它们生效。

解决办法 #

方法1：用React状态控制显示（强烈推荐） #

React是数据驱动视图的框架，直接操作DOM的jQuery和它的理念冲突，最好用React的状态来控制元素显示隐藏：

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

const Test = (props) => {
  // 定义状态控制是否隐藏元素
  const [shouldHide, setShouldHide] = useState(false);

  // 模拟window.load的触发时机
  useEffect(() => {
    const onWindowLoad = () => {
      setShouldHide(true);
    };
    window.addEventListener('load', onWindowLoad);
    // 组件卸载时移除监听，避免内存泄漏
    return () => window.removeEventListener('load', onWindowLoad);
  }, []);

  return (
    <div id="MyDiv">
      <div>
        {/* 用状态控制display属性 */}
        <div id="one" style={{ display: shouldHide ? 'none' : 'block' }}> THIS IS ONE </div>
        {props.list.map((data, i) => {
          // 给每个循环元素设置唯一id，同时用状态控制显示
          return (
            <div 
              id={`oneb-${i}`} 
              key={i} 
              style={{ display: shouldHide ? 'none' : 'block' }}
            >
              THIS IS ONEB
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Test;

方法2：如果必须保留jQuery（不推荐） #

如果你因为历史代码或特殊需求必须用jQuery，得解决两个核心问题：确保DOM元素存在后再执行隐藏，以及替换重复id为class：

import React, { useEffect } from 'react';

const Test = (props) => {
  // 当props.list变化（列表渲染完成）时执行隐藏操作
  useEffect(() => {
    $('#one').hide();
    // 用类选择器选中所有循环生成的元素
    $('.oneb-item').hide();
  }, [props.list]); // 依赖props.list，数据更新时触发

  return (
    <div id="MyDiv">
      <div>
        <div id="one"> THIS IS ONE </div>
        {props.list.map((data, i) => {
          // 替换重复id为class，同时设置唯一id（可选但推荐）
          return (
            <div 
              id={`oneb-${i}`} 
              className="oneb-item" 
              key={i}
            >
              THIS IS ONEB
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Test;

记得把原来的$(window).on('load')代码删掉，现在的逻辑是在React组件渲染完成后才执行jQuery操作，确保目标元素已经存在于DOM中。

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