React中如何判断className为results的div是否存在子p元素

原有代码问题排查 #

• 普通 div 元素不支持 onChange 事件，该事件仅对 input、select、textarea 等表单元素生效，你绑定的处理函数本身就不会触发
• DOM API 拼写错误，正确的方法名是驼峰格式 hasChildNodes()，且该方法只能判断是否存在子节点，无法筛选出是否是 p 标签

最优解决方案：通过状态直接判断 #

React 是状态驱动 UI 的框架，你的 p 元素是动态渲染的，必然存在对应的控制状态，直接复用渲染逻辑判断即可，无需操作 DOM：

import { useState } from 'react';

function Demo() {
  // 假设你根据输入框内容控制p元素渲染
  const [inputVal, setInputVal] = useState('');

  const checkHasP = () => {
    // 判断逻辑和你渲染p的逻辑保持完全一致即可
    const hasPElement = inputVal.trim() !== '';
    alert(hasPElement ? '包含p子元素' : '不包含p子元素');
  };

  return (
    <>
      <input 
        value={inputVal} 
        onChange={(e) => setInputVal(e.target.value)}
        onInput={checkHasP}
      />
      <div className='results'>
        {/* 动态渲染p的逻辑 */}
        {inputVal.trim() !== '' && <p>results</p>}
      </div>
    </>
  );
}

备选方案：DOM 监听方案 #

如果确实需要直接检测 DOM 节点，可配合 useRef + MutationObserver 监听子元素变化：

import { useRef, useEffect } from 'react';

function Demo() {
  const resultDivRef = useRef(null);

  useEffect(() => {
    // 监听子节点变化
    const observer = new MutationObserver(() => {
      const hasPElement = resultDivRef.current.querySelector('p') !== null;
      console.log('是否包含p子元素：', hasPElement);
    });

    observer.observe(resultDivRef.current, {
      childList: true, // 监听子节点增减
      subtree: true // 监听所有后代节点变化
    });

    // 组件卸载时销毁监听
    return () => observer.disconnect();
  }, []);

  return (
    <div className='results' ref={resultDivRef}>
      {/* 动态渲染的p元素 */}
    </div>
  );
}

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