React根据二进制列表长度渲染对应数量div 仅输出1个div问题排查

问题原因 #

你的代码问题出在myFunc函数的循环逻辑里：return语句会直接终止函数执行，所以循环只会运行第一次，匹配到第一个元素的值就返回对应的div，之后的所有列表元素都不会被处理，自然只会输出1个div。

修复方案 #

React中渲染列表的标准写法是使用数组的map方法遍历生成对应元素，修改后的代码如下：

import cx from 'clsx';

// 注意：React组件名首字母需要大写，否则会被识别为普通HTML标签
const MyComponent = () => {
  return (
    <div className={styles.wrapper}>
      <div className={styles.listClass}>
        {myBinaryList.map((binaryVal, index) => (
          {/* key为React列表渲染必填属性，若列表会动态增删建议替换为业务唯一ID */}
          <div 
            key={index}
            className={binaryVal === 1 ? cx(styles.all, styles.special) : cx(styles.all)}
          ></div>
        ))}
      </div>
    </div>
  );
};

export default MyComponent;

如果你需要保留单独封装myFunc的写法，可以调整为收集所有元素后统一返回：

function myFunc(binaryList) {
  const divList = [];
  for (const [index, binaryVal] of binaryList.entries()) {
    if (binaryVal === 1) {
      divList.push(<div key={index} className={cx(styles.all, styles.special)}></div>);
    } else if (binaryVal === 0) {
      divList.push(<div key={index} className={cx(styles.all)}></div>);
    }
  }
  return divList;
}

内容的提问来源于stack exchange，提问作者Denver Dang