React+Next.js自定义Dropdown组件：组件名获取失败与Props警告问题

问题1：无法通过组件类型识别子组件，只能依赖className #

修复方案 #

直接通过组件引用判断，不要依赖className（className是给DOM元素用的，容易误判且不可靠）：

1. 在Dropdown.tsx中导入DropdownToggle和DropdownMenu组件：

import { DropdownToggle } from './DropdownToggle';
import { DropdownMenu } from './DropdownMenu';

2. 修改子组件遍历逻辑，直接比较组件类型：

export const Dropdown = ({ children }) => { // 必须接收children参数
  const [dropdownOpen, setDropdownOpen] = useState(false);

  const childrenWithProps = React.Children.map(children, child => {
    if (React.isValidElement(child)) {
      // 判断是否为DropdownToggle组件
      if (child.type === DropdownToggle) {
        return React.cloneElement(child, {
          onClick: () => setDropdownOpen(!dropdownOpen),
        });
      }
      // 判断是否为DropdownMenu组件
      if (child.type === DropdownMenu) {
        return React.cloneElement(child, {
          isOpen: dropdownOpen,
        });
      }
    }
    return child;
  });

  return (
    <div className={styles.dropdown}>
      {childrenWithProps}
    </div>
  )
}

若因场景限制无法直接引用组件，也可给自定义组件设置displayName，通过child.type.displayName判断：

• 在DropdownToggle.tsx中添加：

  DropdownToggle.displayName = 'DropdownToggle';
  

• 在DropdownMenu.tsx中添加：

  DropdownMenu.displayName = 'DropdownMenu';
  

• 然后在Dropdown.tsx中判断：

  if (child.type.displayName === 'DropdownToggle') { /* 逻辑 */ }
  

问题2：React警告“React does not recognize the isOpen prop on a DOM element.” #

原因与修复 #

该警告是因为isOpen属性被错误传递给了原生DOM元素（如div、button），而非自定义的DropdownMenu组件。按以下步骤修复：

1. 确保Dropdown组件接收children参数：
   原Dropdown组件未声明接收children，导致无法正确遍历子组件，可能误将props传递给DOM元素。修改组件定义为：

   export const Dropdown = ({ children }) => { ... }
   

2. 改用组件类型判断替代className判断：
   原代码通过className判断子组件，若DropdownMenu的底层div设置了DropdownMenu类名，会导致把div当成目标组件，传递isOpen给div触发警告。使用问题1中的组件类型判断即可彻底避免该问题。

3. 检查DropdownMenu组件的props传递：
   确保DropdownMenu没有把isOpen传递给底层DOM元素。你的现有代码是正确的，建议优化className写法避免布尔值：

   export const DropdownMenu: React.FC<PropsWithChildren<DropdownMenuProp>> = ({isOpen, children}) => {
     return (
       <div className={isOpen ? 'open' : ''}>
         {children}
       </div>
     )
   }
   

   注意：不要使用{...props}把所有props传递给div，否则会将isOpen等自定义props传给原生DOM元素。

内容的提问来源于stack exchange，提问作者Angga Ari Wijaya