使用Shadcn/Radix asChild触发React.Children.only错误的问题

问题原因 #

使用SelectTrigger asChild时，Radix要求传递给它的子元素必须是单个React元素。你的代码里，Button的子节点用了React片段(<>...</>)，虽然片段本身不生成DOM，但React.Children.only会识别到片段内部包含多个子节点（文本/字段值 + ChevronsUpDown图标），从而触发该错误。替换Button为div后依然报错，也是因为div内部还是用片段包裹了多个子元素。

修复方案 #

把片段替换成一个实际的容器元素（比如<div>或<span>），确保Button只有一个子元素。修改后的代码如下：

<SelectTrigger asChild>
    <Button
        variant="outline"
        role="combobox"
        className={cn(
            "w-[200px] justify-between",
            !field.value &&
                "text-muted-foreground",
        )}
    >
        {/* 用div替换片段，保证单个子元素 */}
        <div className="flex items-center justify-between w-full">
            {field.value
                ? getAllFormFactors.data?.find(
                        (formFactor) =>
                            formFactor.id === field.value,
                    )?.name
                : "Select form factor"}
            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </div>
    </Button>
</SelectTrigger>

如果不需要额外样式，也可以用<span>代替<div>，核心是保证Button的子元素为单个节点。

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