使用antd中Drawer组件点击不弹出问题

前言

在antd官网复制Drawer抽屉案例在页面上展示时,发现点击按钮Drawer组件并不会弹出来,控制台也没有报错。


1.引入代码

import { Button, Drawer } from 'antd';
import { useState } from 'react';
const App = () => {
  const [open, setOpen] = useState(false);
  const showDrawer = () => {
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };
  return (
    <>
      <Button type="primary" onClick={showDrawer}>
        Open
      </Button>
      // 低版本的antd需要使用visible属性来控制Drawer是否可见
      <Drawer title="Basic Drawer" placement="right" onClose={onClose} open={open}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Drawer>
    </>
  );
};
export default App;

只需要将open={}属性改为visible={},这是因为版本问题,小于 4.23.0 使用 visible。


总结

弹层类组件为什么要统一至 open 属性?
因为历史原因,弹层类组件展示命名并不统一,出现了 open 与 visible 都在使用的情况。这使得非 tsx 用户在开发时遭遇的记忆成本。同样导致新增 feature 时选择何种命名的模棱两可。因而我们希望统一该属性命名,你仍然可以使用原本的 visible 它仍然会向下兼容,但是从 v5 起我们将从文档中移除该属性。

你可能感兴趣的:(前端,javascript,前端,开发语言)