如何通过Props调整React-Bootstrap <Image />的尺寸：自定义Avatar组件实现方案

嘿，这事儿其实很简单！你不需要把size props传到CSS文件里，直接在组件内部根据size的值给react-bootstrap的<Image>组件设置尺寸就好。下面是具体的实现步骤和修改后的代码：

核心思路 #

我们可以创建一个尺寸映射对象，把sm/md/lg这三个字符串对应到具体的像素尺寸，然后将这个尺寸值直接传递给<Image>组件的width和height属性（或者用style属性），这样就能轻松控制头像大小了。

修改后的完整代码 #

import React from 'react';
import { string, oneOf } from 'prop-types';
import { Image } from 'react-bootstrap';
import './avatar.module.scss';

const Avatar = ({ size }) => {
  // 定义尺寸映射，数值可以根据你的需求调整
  const sizeMap = {
    sm: 40,
    md: 60,
    lg: 80
  };

  return (
    <div className="avatar-component">
      {/* 将映射后的尺寸传递给Image组件 */}
      <Image roundedCircle width={sizeMap[size]} height={sizeMap[size]} />
    </div>
  );
};

// 更严格的prop类型校验，限制只能是指定的三个值
Avatar.propTypes = {
  size: oneOf(['sm', 'md', 'lg'])
};

Avatar.defaultProps = {
  size: 'md'
};

export default Avatar;

额外优化说明 #

1. 严格的Prop校验：我把propTypes改成了oneOf，这样可以确保传入的size只能是sm/md/lg中的一个，避免无效值导致的问题。
2. 灵活调整尺寸：你可以随时修改sizeMap里的像素值，来适配不同的设计需求。
3. 另一种写法（用style属性）：如果更倾向于用内联样式，也可以这样写<Image>组件：

<Image 
  roundedCircle 
  style={{ 
    width: `${sizeMap[size]}px`, 
    height: `${sizeMap[size]}px` 
  }} 
/>

这样一来，当你使用<Avatar size="sm" />或者<Avatar size="lg" />时，头像就会自动对应到你设置的尺寸啦！

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