我创建了一个进度条组件,它可以获取颜色,高度,值和最大值等道具。现在它显示了一个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"
/>);
});
如何更新我的组件,以便它可以在群组中使用?
答案 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.groups
和props.height
访问它们。
另一种方式是:
const ProgressBar = ({groups, heightSize}) => {
console.log(groups, heightSize);
}
这只是object destructuring,现在我们可以直接按group和heightSize使用这些值。
注意:将唯一键分配给地图中的每个进度条,我使用了项目索引,但这不是一个好方法,因此请从组对象中指定一些唯一值。