React 18+React-Bootstrap5：实现带动态选中/未选中属性的切换开关

环境说明 #

• React 版本：18.0
• CSS 框架：React-Bootstrap 5.0
• 目标组件：切换开关（Toggle Switch）

需求 #

通过useState钩子实现Form.Check组件的动态选中/未选中状态切换。

最优实现方案 #

无需通过if...else分支渲染或抽离重复组件，直接利用React状态绑定checked属性即可实现动态切换，代码简洁且符合React设计思路：

import { useState } from 'react';
import { Form } from 'react-bootstrap';

function DynamicToggleSwitch() {
  // 初始化开关状态，false表示默认未选中
  const [isChecked, setIsChecked] = useState(false);

  // 切换状态的处理函数，每次触发翻转当前状态
  const handleToggleChange = () => {
    setIsChecked(prevState => !prevState);
  };

  return (
    <Form.Check
      type="switch"
      id="dynamic-switch"
      label="动态控制的切换开关"
      // 绑定状态到checked属性
      checked={isChecked}
      // 状态更新触发函数
      onChange={handleToggleChange}
    />
  );
}

export default DynamicToggleSwitch;

对两种尝试的说明 #

1. 尝试1（return中用if...else切换属性）：这种写法会让JSX结构冗余，不符合React声明式渲染的理念，完全可以通过状态绑定替代分支判断。
2. 尝试2（抽离函数分别渲染不同状态的组件）：属于重复造轮子，React-Bootstrap的Form.Check本身支持通过checked属性动态控制状态，不需要为选中/未选中状态分别编写组件。

内容的提问来源于stack exchange，提问作者Common Man