当前位置：首页 > React

react switch 如何接收参数

2026-01-24 20:17:13React

React Switch 组件接收参数的方法

在 React 中，Switch 组件（通常来自 react-router-dom）或自定义的开关组件（如 react-switch 库）可以通过 props 接收参数。以下是两种常见情况的实现方式：

使用 react-router-dom 的 Switch 接收参数

react-router-dom 的 Switch 组件用于渲染匹配的第一个 Route，其本身不直接接收动态参数，但可以通过 Route 传递：

react switch 如何接收参数

import { Switch, Route } from 'react-router-dom';

function App() {
  return (
    <Switch>
      <Route path="/user/:id" component={UserPage} />
    </Switch>
  );
}

// UserPage 组件通过 props.match.params 获取参数
function UserPage(props) {
  const { id } = props.match.params;
  return <div>User ID: {id}</div>;
}

使用 react-switch 库接收参数

如果是第三方开关组件（如 react-switch），通过 props 传递配置参数：

import Switch from 'react-switch';

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

  return (
    <Switch
      onChange={setChecked}
      checked={checked}
      height={20}       // 高度参数
      width={40}        // 宽度参数
      uncheckedIcon={false} // 隐藏未选中图标
      checkedIcon={false}   // 隐藏选中图标
    />
  );
}

自定义 Switch 组件接收参数

自定义开关组件时，通过解构 props 接收参数：

react switch 如何接收参数

function CustomSwitch({ isOn, handleToggle, color }) {
  return (
    <button
      onClick={handleToggle}
      style={{ backgroundColor: isOn ? color : 'gray' }}
    >
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

// 使用时传递参数
<CustomSwitch isOn={true} handleToggle={() => {}} color="green" />

通过 children 传递内容

若需要动态内容，可通过 children 传递：

function LabeledSwitch({ children, ...props }) {
  return (
    <div>
      <Switch {...props} />
      <label>{children}</label>
    </div>
  );
}

// 使用时
<LabeledSwitch checked={true}>启用功能</LabeledSwitch>

类型检查（TypeScript/PropTypes）

使用 TypeScript 或 PropTypes 定义参数类型：

// TypeScript
interface SwitchProps {
  isActive: boolean;
  onChange: (active: boolean) => void;
}

function TSXSwitch({ isActive, onChange }: SwitchProps) {
  return <Switch checked={isActive} onChange={onChange} />;
}

// PropTypes
import PropTypes from 'prop-types';

function PTSwitch({ size }) {
  return <Switch height={size} width={size * 2} />;
}

PTSwitch.propTypes = {
  size: PropTypes.number.isRequired,
};