我如何添加与道具数量一样多的按钮，而不是导致太多的React重新渲染？

Question

这应该是比较简单的，但我不明白。我想根据已通过父组件的道具动态地呈现按钮。我不能“.map”，因为它不是一个数组，而且我似乎不能让for循环传入react。我能得到一些帮助吗？我在renderButtonsHandler（）上缺少什么？

const Carousel = ({ chunkSize }) => {
  const [currentSlide, setCurrentSlide] = useState(0);
  const totalImages = imageArray.length;
  
  
  const renderButtonsHandler = (chunkSize) => {
    const buttons = [];
    for (var i = 0; i < chunkSize; i++) {
      buttons.push(
        <button
          className="circleButton"
          key={i}
          onClick={setCurrentSlide(i)}
        ></button>
      );
    }
    return buttons;
  };
  
  return (
    <div className="container">
      <button  </button>
      {imageArray.map((img, index) => {
        return (
          <div>
            {index === currentSlide && (
              <img
                className="carouselImg"
                src={img}
                key={index}
                />
            )}
          </div>
        );
      })}
      <button></button>
      {renderButtonsHandler(chunkSize)}
    </div>
  );
};

export default Carousel;

Answer 1

当然，如果chunksize是一个数字，您可以.map。但你得用不同的方法去做。你不需要函数。您可以创建一个新的数组，用空字符串填充它并映射它。然后在代码中使用它，如：

   {new Array(chunkSize).fill("").map((item, i) => (
      <button
        key={i}
        className="circleButton"
        onClick={setCurrentSlide(i)}
      ></button>
    ))}

示例在此