根据列表大小返回div的x-amount

Question

我有一个组件，大致看起来像这样:

import cx from 'clsx';
const myComponent = () => {
function myFunc(binaryList) {
for (const binaryVal of binaryList) {
if (binaryVal == 1) {
return <div className={cx(styles.all, styles.special)}></div>;
} else if (binaryVal == 0) {
return <div className={cx(styles.all)}></div>;
}
}
}
return (
<div className={styles.wrapper}>
<div className={styles.listClass}>{myFunc(myBinaryList)}</div>
</div>
);
};
export default myComponent;

基本上，我从某处得到一个列表(myBinaryList)，我将其输入到函数myFunc中。这个列表可以有不同的长度，但是由1和0组成，所以像这样:

myBinaryList = [0, 0, 1, 1, 1, 0, 0, 1]

我想做的是把这个列表myBinaryList，在函数myFunc中使用它，然后它应该输出与列表长度相同的div数。所以基本上这个列表的输出应该是:

<div className={cx(styles.all)}></div>
<div className={cx(styles.all)}></div>
<div className={cx(styles.all, styles.special)}></div>
<div className={cx(styles.all, styles.special)}></div>
<div className={cx(styles.all, styles.special)}></div>
<div className={cx(styles.all)}></div>
<div className={cx(styles.all)}></div>
<div className={cx(styles.all, styles.special)}></div>

但是现在我只得到一个div作为输出。我做错了什么?

Answer 1

您需要返回一个div数组。现在你的myfuncc函数只返回一个div。试试用map.

function myFunc(binaryList) {
return binaryList.map(binaryVal => {
if (binaryVal == 1) {
return <div className={cx(styles.all, styles.special)}></div>
} else if (binaryVal == 0) {
return <div className={cx(styles.all)}></div>
}
});
}