使用不带this.state的自定义按钮触发AntDesign (React) sider

AntDesign 是一个基于 React 的 UI 组件库，它提供了丰富的组件，方便开发者快速构建优雅的界面。在 AntDesign 中，Sider 是一个常用的组件，用于实现侧边栏导航的功能。

在 React 中使用 AntDesign 的 Sider 组件，可以通过自定义按钮触发的方式来实现。具体步骤如下：

首先，确保已经安装并引入了 AntDesign 的相关依赖。可以通过以下方式来安装：

npm install antd

然后在代码中引入 Sider 组件：

import { Sider } from 'antd';

在 React 组件中，创建一个按钮，并设置一个点击事件处理函数。点击按钮时，将触发 Sider 的展开或收起状态的切换。

import React, { useState } from 'react';
import { Sider, Button } from 'antd';

const MyComponent = () => {
  const [siderCollapsed, setSiderCollapsed] = useState(false);

  const handleToggleSider = () => {
    setSiderCollapsed(!siderCollapsed);
  };

  return (
    <div>
      <Button onClick={handleToggleSider}>Toggle Sider</Button>
      <Sider collapsed={siderCollapsed}>
        {/* Sider 内容 */}
      </Sider>
    </div>
  );
};

export default MyComponent;

在上述代码中，使用 useState 钩子来定义一个状态变量 siderCollapsed 和一个更新状态的函数 setSiderCollapsed。按钮的点击事件处理函数 handleToggleSider 被调用时，通过调用 setSiderCollapsed 函数来切换 siderCollapsed 状态的值。

在 Sider 组件中，根据 siderCollapsed 状态的值来控制侧边栏的展开或收起。

import React from 'react';
import { Sider } from 'antd';

const MyComponent = () => {
  // ...

  return (
    <div>
      {/* ... */}
      <Sider collapsible collapsed={siderCollapsed}>
        {/* Sider 内容 */}
      </Sider>
    </div>
  );
};

export default MyComponent;

通过设置 Sider 组件的 collapsible 属性为 true，可以使侧边栏具有折叠功能。并且根据 siderCollapsed 的值来设置 collapsed 属性，以控制侧边栏的展开或收起状态。

需要注意的是，上述代码中的 MyComponent 组件只是示例，实际应用中需要根据具体的需求来设计和组织代码。

推荐的腾讯云相关产品：腾讯云云开发（Tencent Cloud CloudBase）是腾讯云提供的云原生应用开发平台，它提供了前端开发框架、云函数、数据库等基础设施和工具，帮助开发者快速搭建和部署云原生应用。

腾讯云产品介绍链接：腾讯云云开发