我如何在没有导致React上太多重新渲染的情况下添加与道具编号中传递的按钮一样多的按钮

Question

这应该相对简单，但我无法理解。我想根据通过父组件传递的道具来动态渲染按钮。我不能；。地图"；因为它不是一个数组，而且我似乎无法让我的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>
))}

就是一个例子

Answer 2

也许你可以试试这个：

return (
<div className="container">
<button  </button>
{imageArray.map((img, index) => {
return (
<div>
{index === currentSlide && (
<img
className="carouselImg"
src={img}
key={index}
/>
)}
</div>
);
})}
<button></button>
{[...Array(chunkSize).keys()].map(i)=>( 
<button
className="circleButton"
key={i}
onClick={setCurrentSlide(i)}
></button>
)}
</div>
);