Javascript 将对象数组传递给反应组件

我创建了一个进度条组件，它采用颜色、高度、值和最大值等道具。现在它显示一个单格进度条，我正在尝试对进度条进行分组，并按颜色对它们进行分组。这是我的组件

const ProgressBar = ({
  heightSize,
  value,
  max,
  ...customProps
}) => {
  const classes = classNames([
    'my-ProgressBar',
    { [`my-ProgressBar--${heightSize}`]: heightSize },
    customProps.className,
  ]);

  const normalizedValue = (value / max) * 100;

  return (
    <progress
      {...customProps}
      style={{ color: customProps.color }}
      className={classes}
      max={100}
      value={normalizedValue}
      aria-valuemax={100}
      aria-valuemin={0}
      aria-valuenow={normalizedValue}
      tabIndex="-1"
    />);
};

const ProgressBar=({
高度大小，
价值
最大值，
…定制道具
}) => {
常量类=类名([
“我的进度条”，
{[`my ProgressBar--${heightSize}`]：heightSize}，
customProps.className，
]);
常量normalizedValue=（值/最大值）*100；
返回(
);
};

我正在尝试更新此组件，以便如果我将数组传递给此组件，它将返回分组进度条。这是我失败的尝试之一

const ProgressBar = (groups) => {
        const GroupProgressBar= groups.map((group) => (
        <div key={group.color}>
          color: {group.color},
          heightSize: {group.height},
          value: {group.value},
          color: {group.color}          
        </div>
      ));
            return (
              <progress
                {...customProps}
                style={{ color: group.color }}
                className={classes}
                max={100}
                value={normalizedValue}
                aria-valuemax={100}
                aria-valuemin={0}
                aria-valuenow={normalizedValue}
                tabIndex="-1"
              />);
        });

const ProgressBar=（组）=>{
const GroupProgressBar=groups.map（（组）=>(
颜色：{group.color}，
heightSize:{group.height}，
值：{group.value}，
颜色：{group.color}
));
返回(
);
});

---

如何使用组件使其在组中工作？

首先使用map为数组的每个条目创建进度条，然后从组件返回

这样写：

const ProgressBar = ({groups, heightSize}) => {

    let heightSize = 10;   /*calculate here*/

    const GroupProgressBar = groups.map((group, i) => (
          <progress
              key = {i}
              {...customProps}
              heightSize = {heightSize}
              style={{ color: group.color }}
              className={classes}
              max={100}
              value={group.value}
              aria-valuemax={100}
              aria-valuemin={0}
              aria-valuenow={normalizedValue}
              tabIndex="-1"
          />
        )
    )

    return <div> {GroupProgressBar} </div>
}

const ProgressBar = (props) => {
    console.log(props);
}

这里props将包含所有传递的数据和方法，您可以通过

props.keyName

访问任何传递的值，从父级传递高度和组，并通过

props.groups

和

props.height

访问它们

另一种方式是：

const ProgressBar = ({groups, heightSize}) => {
    console.log(groups, heightSize);
}

这只是，现在我们可以直接按组和高度大小使用这些值

---

注意：为地图中的每个进度条分配唯一键，我使用了项目索引，但这不是一个好方法，所以从组对象中分配一些唯一值。

分组进度条意味着，数组元素的每个进度条都正确？@Mayank Shukla。是的，谢谢你的帮助。我根据传递的值推导heightSize。我有一个班，我的进度条是css。因此，基于高度小，中，高，我得到的酒吧大小。我该怎么做？很抱歉，我没有得到，你想计算每个条目的高度，否则所有数组条目的高度都是固定的？np。它将为所有数组条目修复。谢谢你问这个问题，这就解决了一个问题：）谢谢。我们是否可以将heightSize作为单独的道具，以便现有css类将根据用户通过的内容返回大小？不要忘记在那些

进度
组件上设置
键
属性。