传递对象数组以反应组件

时间:2017-07-12 18:18:13

标签: javascript reactjs jsx

我创建了一个进度条组件,它可以获取颜色,高度,值和最大值等道具。现在它显示了一个sigle进度条,我正在尝试对进度条进行分组并按颜色对它们进行分组。这是我的组件

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 = (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"
              />);
        });

如何更新我的组件,以便它可以在群组中使用?

1 个答案:

答案 0 :(得分:1)

首先使用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>
}

查看DOCs了解详情。

<强>更新

请参阅我们可以传递来自父组件的任何道具, props 是包含所有数据的对象。在功能组件中,我们需要这样写:

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

此处道具将包含所有传递的数据和方法,您可以props.keyName访问任何传递的值,从父级传递高度和组,并通过props.groupsprops.height访问它们。

另一种方式是:

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

这只是object destructuring,现在我们可以直接按group和heightSize使用这些值。

注意:将唯一键分配给地图中的每个进度条,我使用了项目索引,但这不是一个好方法,因此请从组对象中指定一些唯一值。