不使用解构赋值

> Last Format Time：7/14/2026 20:56:57

你问的是：

SwitchPrimitive.Root
                ↑
               这个点

这里的 . 不是 React 语法，就是最普通的 JavaScript 对象属性访问。

import * as 到底导入了什么？

这句：

import * as SwitchPrimitive from "@radix-ui/react-switch";

意思是：

> 把整个模块导入成一个对象，名字叫 SwitchPrimitive。

可以把它想象成：

const SwitchPrimitive = {
  Root: ...,
  Thumb: ...,
  Switch: ...,
  createSwitch: ...,
};

所以：

SwitchPrimitive.Root

就是

SwitchPrimitive["Root"]

和下面完全一样：

const obj = {
  name: "Tom",
  age: 18,
};

obj.name;      // Tom
obj.age;       // 18

这里的点就是访问对象的属性。

Radix 实际上导出了很多东西

@radix-ui/react-switch 大概（简化后）是这样的：

// @radix-ui/react-switch

export const Root = ...;
export const Thumb = ...;

如果你写：

import * as SwitchPrimitive from "@radix-ui/react-switch";

那么得到：

SwitchPrimitive = {
  Root,
  Thumb,
}

于是：

SwitchPrimitive.Root

就是：

import * as SwitchPrimitive from "@radix-ui/react-switch";

而：

import * as SwitchPrimitive from "@radix-ui/react-switch";

就是：

import * as SwitchPrimitive from "@radix-ui/react-switch";

所以你的组件里面可以写：

import * as SwitchPrimitive from "@radix-ui/react-switch";

为什么不用直接导入？

其实完全可以这样写：

import * as SwitchPrimitive from "@radix-ui/react-switch";

这和下面是一样的：

import * as SwitchPrimitive from "@radix-ui/react-switch";

很多组件库（如 shadcn/ui）更喜欢第二种写法，因为它能明确表明这些组件都来自同一个模块，也避免和项目里其他名为 Root、Thumb 的组件冲突。

用一个生活中的例子理解

假设：

import * as SwitchPrimitive from "@radix-ui/react-switch";

那么：

import * as SwitchPrimitive from "@radix-ui/react-switch";

这里：

  • MathUtil 是对象

  • add、sub 是对象的属性

  • . 就是访问对象属性

SwitchPrimitive 也是一样：

import * as SwitchPrimitive from "@radix-ui/react-switch";

都是在访问对象上的属性。

总结

SwitchPrimitive.Root 中的 . 就是 JavaScript 的成员访问运算符（Member Access Operator），表示“取对象上的 Root 属性”。

所以：

import * as SwitchPrimitive from "@radix-ui/react-switch";

可以理解为：

const SwitchPrimitive = {
  Root: ...,
  Thumb: ...,
  Switch: ...,
  createSwitch: ...,
};

然后：

const SwitchPrimitive = {
  Root: ...,
  Thumb: ...,
  Switch: ...,
  createSwitch: ...,
};

就是拿到 Root 这个组件；

const SwitchPrimitive = {
  Root: ...,
  Thumb: ...,
  Switch: ...,
  createSwitch: ...,
};

就是拿到 Thumb 这个组件。

这和 React 没有特殊关系，是标准的 JavaScript 语法。