antd: Drawer `visible` is deprecated which will be removed in next major version, please use `open` instead🧐[问题 | question]

[kakuilan]

🧐 问题描述 | Problem description

devScripts.js:6523 Warning: [antd: Drawer] `visible` is deprecated which will be removed in next major version, please use `open` instead. 
    at Drawer (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_divider_index_js-node_modules_antd_es_drawer_index_js.379221ab.async.js:128:21)
    at SettingDrawer (http://localhost:8000/mf-dep_vendors-node_modules_ant-design_pro-layout_es_index_js.5221226e.async.js:2209:37)
    at WithExceptionOpChildren (http://localhost:8000/.umi__plugin-layout__Layout.js:253:24)
    at main
    at http://localhost:8000/mf-dep_vendors-node_modules_antd_es_menu_index_js.0aa7bb3a.async.js:436:25
    at http://localhost:8000/mf-dep_vendors-node_modules_antd_es_menu_index_js.0aa7bb3a.async.js:419:66
    at ErrorBoundary (http://localhost:8000/mf-dep_vendors-node_modules_ant-design_pro-layout_es_index_js.5221226e.async.js:5099:87)
    at ConfigProviderWrap (http://localhost:8000/mf-dep_vendors-node_modules_ant-design_pro-provider_es_index_js-node_modules_ant-design_pro-utils_es-8d35cf.5e7705ff.async.js:255:24)
    at WrapContent (http://localhost:8000/mf-dep_vendors-node_modules_ant-design_pro-layout_es_index_js.5221226e.async.js:863:37)
    at div
    at section

💻 示例代码 | Sample code

src/app.tsx，其中的

export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
  return {
    rightContentRender: () => <RightContent />,
    disableContentMargin: false,
    //水印
    waterMarkProps: {
      content: initialState?.currentUser?.nickname,
    },
    footerRender: () => <Footer />,
    onPageChange: () => {
      const { location } = history;
      // 如果没有登录，重定向到 login
      if (!initialState?.currentUser && location.pathname !== loginPath) {
        history.push(loginPath);
      }
    },
    links: isDev
      ? [
          <Link to="/~docs" key="docs">
            <BookOutlined />
            <span>业务组件文档</span>
          </Link>,
        ]
      : [],
    menuHeaderRender: undefined,
    // 自定义 403 页面
    // unAccessible: <div>unAccessible</div>,
    // 增加一个 loading 的状态
    childrenRender: (children, props) => {
      // if (initialState?.loading) return <PageLoading />;
      return (
        <>
          {children}
          {!props.location?.pathname?.includes('/login') && (
            <SettingDrawer
              disableUrlParams
              enableDarkTheme
              settings={initialState?.settings}
              onSettingChange={(settings) => {
                setInitialState((preInitialState: any) => ({
                  ...preInitialState,
                  settings,
                }));
              }}
            />
          )}
        </>
      );
    },
    ...initialState?.settings,
  };
};

🚑 其他信息 | Other information

Node：18.12.1 antd:：4.24.4 @ant-design/pro-layout：6.38.22

请问怎么解决呢？

[ghost]

我替你翻译一下，用 open 代替 visible

[kakuilan]

我替你翻译一下，用 open 代替 visible

SettingDrawer是@ant-design/pro-layout的组件，无法改。 现在是不想升级组件，看下有没有办法可以

[hfpp2012copy]

你用正式版本吧，就没有警告了

[kakuilan]

你用正式版本吧，就没有警告了

我现在的ant-design-pro就是正式版5.2.0，v6.0.0才是beta.1，应该还存在一些问题，不好升级

[hfpp2012copy]

你用正式版本吧，就没有警告了

我现在的ant-design-pro就是正式版5.2.0，v6.0.0才是beta.1，应该还存在一些问题，不好升级

6 的正式版才没有警告，前几天刚上的 https://www.qiuzhi99.com/playlists/antdpro-prisma.html

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

如果你不想升级组件，你可以在SettingDrawer组件内部，找到使用visible的地方，改为使用open，并设置open为visible的值，例如：

<Drawer
    visible={open}   //可以改为 open
    ......
    >
    ......
</Drawer>

变更为：

<Drawer
    open={visible}   //可以改为 open
    ......
    >
    ......
</Drawer>

注意，代码中open的true和false的值需要改成visible的true和false的值

参考文档：https://ant.design/components/drawer-cn/#API