使用 props 更改 react-bootstrap <Image /> 大小答案

【问题标题】：Change react-bootstrap <Image /> size using props使用 props 更改 react-bootstrap <Image /> 大小
【发布时间】：2023-03-06 01:51:01
【问题描述】：

我正在使用 react-bootstrap 制作 Avatar 组件。我需要将一个可以是“sm”、“md”或“lg”的字符串传递给我的 Avatar 组件。

<Avatar size="md" />

在该组件中，我必须更改我的 react-bootstrap <Image /> 的大小。我该怎么做？我不知道如何将这个道具传递给我的 css 文件（并且不认为我需要它）。这是我的头像组件。

import React from 'react';
import { string } from 'prop-types';
import { Image } from 'react-bootstrap';

import './avatar.module.scss';

const Avatar = ({size}) => {
 return (
   <div className="avatar-component">
     <Image roundedCircle />
   </div>
 );
};

Avatar.propTypes = {
 size: string
};

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

export default Avatar;

【问题讨论】：

查看 react bootstrap 文档，您似乎打算通过包裹在 Col. IOW 中来控制大小，而不是包裹在 div 中，而是使用 Col 并将大小传递给它。

标签： javascript css reactjs react-bootstrap

【解决方案1】：

React-bootstrap 基于 12 列网格。您的 Image 组件必须包装在 Col 组件中。 Image 的大小取决于您要分配给 Image 的引导列数。

例如，在“md”屏幕尺寸上，默认情况下您有 2 列。您可以类似地为每个屏幕尺寸（sm、lg...）分配您想要的任何数字：

import React from 'react';
import { string } from 'prop-types';
import { Image } from 'react-bootstrap';

import './avatar.module.scss';

const Avatar = ({size}) => {
 return (
   <Col md={size} className="avatar-component">
     <Image roundedCircle src={/* your file path */} />
   </Col>
 );
};

Avatar.propTypes = {
 size: number
};

Avatar.defaultProps = {
 size: 2
};

export default Avatar;

【讨论】：