React-Bootstrap迁移：动态设置Modal尺寸遇类型不匹配问题求助

在从react-bootstrap 0.32.1迁移到1.0.0时，动态设置Modal的size属性出现Type 'string' is not assignable to type '"sm" | "lg" | "xl"'的类型错误——这是因为1.0.0版本给Modal的size字段定义了严格的联合类型，而你的组件props里的size是宽泛的string类型，类型不匹配导致报错。下面是几种解决方法：

1. 直接做类型断言（快速解决） #

如果能确保传入的this.props.size只会是'sm'、'lg'、'xl'中的一个，可以直接用类型断言把它转换成Modal允许的类型：

import { Modal, ModalProps } from 'react-bootstrap';

// 在Modal组件中使用
<Modal 
  show={this.props.show} 
  size={this.props.size as ModalProps['size']} 
  onHide={this.props.onHide}
>
  {/* Modal内容 */}
</Modal>

2. 约束自身组件的props类型（从根源避免错误） #

如果是你自己封装的Modal组件，在定义组件props接口时，直接复用react-bootstrap的ModalProps['size']类型，或者直接写相同的联合类型，这样父组件传参时TypeScript会自动校验，避免传入非法值：

import { Modal, ModalProps } from 'react-bootstrap';

// 定义自己组件的props
interface MyCustomModalProps {
  show: boolean;
  size?: ModalProps['size']; // 直接复用Modal的size类型
  onHide: () => void;
}

class MyCustomModal extends React.Component<MyCustomModalProps> {
  render() {
    return (
      <Modal 
        show={this.props.show} 
        size={this.props.size} 
        onHide={this.props.onHide}
      >
        {/* Modal内容 */}
      </Modal>
    );
  }
}

3. 运行时校验+类型守卫（安全兜底） #

如果无法保证传入的size一定合法，比如可能从后端接口获取或者用户输入，建议加一个类型守卫函数做运行时校验，非法值时可以默认设为undefined（使用Modal默认尺寸）：

import { Modal, ModalProps } from 'react-bootstrap';

// 定义类型守卫函数
const isValidModalSize = (size: string): size is ModalProps['size'] => {
  return ['sm', 'lg', 'xl'].includes(size);
};

// 在组件中使用
<Modal 
  show={this.props.show} 
  size={isValidModalSize(this.props.size) ? this.props.size : undefined} 
  onHide={this.props.onHide}
>
  {/* Modal内容 */}
</Modal>

另外，关于访问ModalProps：只需要从react-bootstrap中导入即可，上面的代码已经示例了import { ModalProps } from 'react-bootstrap';，导入后就能在代码里引用这个接口的类型了。

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