如何根据REACT中的值更改引导程序按钮的大小

Question

我是React场景的新手，在实现以下设计时需要一些帮助：

上面是表示很多项目的按钮/小部件。我需要根据按钮/小工具中的值来调整它们的大小，并且所有按钮/小工具都应放在一个<div className="row">中，所有按钮/小工具都是可单击的，并在单击时对表格进行排序。

请指导我实现以上目标。 values可以是动态的，即可以超过6个。为简单起见，我将它们定义为const，但它们将以DB的形式出现。

const value1 = 3;
const value2 = 5;
const value3 = 5;
const value4 = 3;
const value5 = 15;
const value6 = 3;
.
.
.
.
return (
  <> 
    <Portlet fluidHeight={true} className="portlet--border-bottom-dark">
       <PortletHeader
         title={
          <>
            ...
          </>
         }
         toolbar={
          <>
            ...
          </>
         }
         <PortletBody fluid={true}>
            <Button variant="success" 
                    className="subscription-manager-buttons" 
                    size="sm" 
                    active>{values}</Button>
         </PortletBody>
    </Portlet>
  </>
)

谢谢。

更新-@onuriltan的回答：结果显示如下：

Answer 1

尝试使用从api获取的值创建一个数组，然后映射该数组并通过乘以某个值来调整按钮，我在这里使用了10

const values = [5,6,7,8,9]


return (
  <> 
     {values.map((value, idx) => (
          <Button
            key={idx}
            style={{width: value * 10}}
            variant="success"
          >
            {value}
          </Button>
      )})
  </>