Vant ActionSheet在React中不显示怎么办？

爱学习的义霞提问于 2026-03-20 05:53:21 阅读 4

组件

我在用 Vant 的 ActionSheet 组件，按照文档写了代码，但点击按钮后动作面板完全没弹出来，控制台也没报错，这是啥情况？

我试过检查 visible 状态、确认引入了组件，也加了 zIndex，但就是不显示。是不是哪里写错了？

const [show, setShow] = useState(false);

return (
  <div>
    <Button onClick={() => setShow(true)}>打开菜单</Button>
    <ActionSheet
      visible={show}
      actions={[{ name: '选项1' }, { name: '选项2' }]}
      onCancel={() => setShow(false)}
    />
  </div>
);

Vant

我来解答赞 9 收藏

反馈

1 条解答

小星语 Lv1

这个问题很常见，核心原因是 Vant React 版本的 ActionSheet 组件 API 命名和你用错了。

Vant React 版的 ActionSheet 用的是 show 而不是 visible，用 onClose 而不是 onCancel。虽然看起来是小事，但 API 名称不对，组件根本不会响应。

来看修正后的代码：

import { ActionSheet, Button } from 'vant';

import 'vant/lib/action-sheet/style';  // 别忘了引入样式



const [show, setShow] = useState(false);



return (

  <div>

    <Button onClick={() => setShow(true)}>打开菜单</Button>

    <ActionSheet

      show={show}

      actions={[{ name: '选项1' }, { name: '选项2' }]}

      onClose={() => setShow(false)}

    />

  </div>

);

还有几个容易踩坑的地方提醒你：

样式文件引入没？Vant 组件需要单独引入样式，如果没加 import 'vant/lib/action-sheet/style'，面板就是透明的或者不渲染。

如果用的是 Vant 4，还需要检查一下是否正确注册了组件。有两种引入方式，要么全量引入 Vant.use(ActionSheet)，要么按需引入。

另外，Vant React 的组件文档和 Vue 版本在命名上有些差异，比如 visible 是 Vue 版的写法，React 版统一用 show。以后遇到类似问题可以先看下 React 文档再动手。

2026-03-20 06:01