如何在自定义React组件中指定ref为props并做类型验证？

要让你的LabeledSwitch组件支持接收ref并完成PropTypes校验，需要做以下几步：

1. 用React.forwardRef包裹组件 #

函数组件默认无法直接接收ref属性，必须通过React.forwardRef实现，它会将ref作为第二个参数传递给组件函数。

2. 定义ref的PropTypes校验规则 #

PropTypes没有直接的ref类型，但React中的ref有两种合法形式：

• 回调函数（用于接收DOM元素或组件实例）
• ref对象（由useRef/createRef创建，包含current属性）

因此用PropTypes.oneOfType组合这两种类型的校验规则即可。

完整修改后的代码 #

import React, { forwardRef } from 'react';
import { FormControlLabel, Switch } from '@mui/material';
import PropTypes from 'prop-types';

const LabeledSwitch = forwardRef(({ label, checked, onChange, required, ...otherProps }, ref) => {
  return (
    <FormControlLabel
      control={<Switch {...otherProps} inputRef={ref} />}
      label={label}
      checked={checked}
      onChange={onChange}
      required={required}
    />
  );
});

LabeledSwitch.propTypes = {
  label: PropTypes.string.isRequired,
  checked: PropTypes.bool,
  onChange: PropTypes.func,
  required: PropTypes.bool,
  // 校验ref的合法类型
  ref: PropTypes.oneOfType([
    PropTypes.func,
    PropTypes.shape({ current: PropTypes.any })
  ])
};

LabeledSwitch.defaultProps = {
  checked: false,
  onChange: null,
  required: false,
  ref: null
};

export default LabeledSwitch;

关键说明 #

• forwardRef将外部传入的ref传递给组件的第二个参数，我们把它赋值给Switch的inputRef，这样外部ref就能指向Switch的原生input元素（符合Material-UI Switch的API设计）。
• oneOfType的校验规则覆盖了React中所有合法的ref形式，确保传入的ref符合要求。
• 设置ref: null作为默认值，满足你对默认值的需求。

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