React中直接传SelectItem与组件包裹传的差异及报错原因

我使用NextUI的Select组件（问题核心与NextUI无关），该组件要求子元素为NextUI的SelectItem组件。

可行写法 #

export const Select: FC<SelectProps> = ({
  isInvalid = false,
  variant = "flat",
  children,
  ...rest
}) => {
  return (
    <NextSelect variant={variant} isInvalid={isInvalid} {...rest}>
      <SelectItem key="1">Select item</SelectItem>
    </NextSelect>
  );
};

这个写法可行，因为直接将SelectItem组件作为NextSelect的子元素传入。

报错写法 #

export const AnotherComponent = () => {
  return <SelectItem key="1">Select item</SelectItem>;
};

export const Select: FC<SelectProps> = ({
  isInvalid = false,
  variant = "flat",
  children,
  ...rest
}) => {
  return (
    <NextSelect variant={variant} isInvalid={isInvalid} {...rest}>
      <AnotherComponent/>
    </NextSelect>
  );
};

此时会抛出错误：TypeError: type.getCollectionNode is not a function

差异原因 #

• NextUI的Select组件内部会直接遍历子元素，检查每个子节点是否为它提供的SelectItem组件，并且会调用SelectItem上的内部方法（比如getCollectionNode）来处理选项逻辑。
• 第二种写法里，SelectItem被包裹在了自定义组件AnotherComponent中，此时NextSelect拿到的子元素是这个自定义组件，而非直接的SelectItem实例。自定义组件本身没有getCollectionNode这个内部方法，所以触发了报错。
• 本质就是：NextSelect需要直接获取到SelectItem的实例，无法穿透自定义组件去识别内部的SelectItem。

内容的提问来源于stack exchange，提问作者sir-haver