antd中Switch组件的使用

是 Ant Design 中的一个组件，用于在开关之间切换。checkedChildren 是 组件的一个属性，用于指定在开关打开时显示的文本或 React 元素。

以下是 组件的基本语法：

import { Switch } from 'antd';

function MyComponent() {
  const [checked, setChecked] = useState(false);

  const handleChange = (checked) => {
    setChecked(checked);
  };

  return (
    <Switch
      checked={checked}
      onChange={handleChange}
    />
  );
}

在这个例子中，我们创建了一个 组件，并将其状态存储在 checked 变量中。当用户切换开关时，我们更新 checked 变量的值。

现在，我们可以使用 checkedChildren 属性来指定在开关打开时显示的文本或 React 元素。例如：

import { Switch } from 'antd';

function MyComponent() {
  const [checked, setChecked] = useState(false);

  const handleChange = (checked) => {
    setChecked(checked);
  };

  return (
    <Switch
      checked={checked}
      onChange={handleChange}
      checkedChildren="开启"
      unCheckedChildren="关闭"
    />
  );
}

在这个例子中，我们将 checkedChildren 属性设置为 "开启"，这意味着在开关打开时，它会显示 "开启"。同时，我们将 unCheckedChildren 属性设置为 "关闭"，这意味着在开关关闭时，它会显示 "关闭"。

需要注意的是，checkedChildren 和 unCheckedChildren 属性可以接受文本或 React 元素作为值。如果您想在开关打开时显示一个图标或其他复杂的元素，可以将一个 React 元素传递给 checkedChildren 属性。例如：

import { Switch } from 'antd';
import { HeartFilled } from '@ant-design/icons';

function MyComponent() {
  const [checked, setChecked] = useState(false);

  const handleChange = (checked) => {
    setChecked(checked);
  };

  return (
    }
      unCheckedChildren="关注"
    />
  );
}

在这个例子中，我们将 checkedChildren 属性设置为 ，这意味着在开关打开时，它会显示一个心形图标。