我正在尝试在网站上构建一种不同组件的幻灯片放映。我已将所需的幻灯片作为单个元素导入，并将它们存储在数组中。我已经编写了基本结构，但是不知道如何使用索引来呈现存储在数组中的组件。
import React, {useState} from 'react';
import Slide1 from './slides/slide1.js';
import Slide2 from './slides/slide2.js';
import Slide3 from './slides/slide3.js';
import Slide4 from './slides/slide4.js';
import Slide5 from './slides/slide5.js';
function Presentation({slides,index}) {
return(
<div className="presentation">
<React.Fragment key={index}> {slides[index]} </React.Fragment>
</div>
)
}
function Buttons({index, setIndex, size}) {
const nextSlide = (index) => {
if(index<size-1) setIndex(++index)
}
const prevSlide = (index) => {
if(index>0) setIndex(--index)
}
return(
<nav className="buttons">
<button onClick={(index)=>prevSlide}> Previous </button>
<button onClick={(index)=>nextSlide}> Next </button>
</nav>
)
}
function Main() {
const slides = [Slide1, Slide2, Slide3, Slide4, Slide5]
const [index,setIndex] = useState(0);
return(
<main>
<Presentation slides={slides} index={index}/>
<Buttons index={index} setIndex={setIndex} length={slides.length}/>
</main>
)
}
export default Main;
但这是行不通的。有没有人有正确或更好的方法来做到这一点？
我重新编写了您的一些代码，因为我不知道幻灯片背后的确切代码。我将它们定义为标签，以使其更容易使用。
我更改了数组并在其中分配了JSX： const slides = [<Slide1 />, <Slide2 />];
我index从组件中的许多代码中删除了代码Button，因为您将其作为道具进行了传递。
最后，您length在主组件中将道具作为道具传递给了Button组件，但是Button组件从size道具中读取了内容。
希望这会有所帮助
import React, { useState } from "react";
const Slide1 = () => {
return <h1>SLIDE 1</h1>;
};
const Slide2 = () => {
return <h1>SLIDE 2</h1>;
};
function Presentation({ slides, index }) {
const renderSlide = () => {
return slides[index];
};
return <div className="presentation">{renderSlide()}</div>;
}
function Buttons({ index, setIndex, size }) {
const nextSlide = () => {
if (index < size - 1) setIndex(i => i + 1);
};
const prevSlide = () => {
if (index > 0) setIndex(--index);
};
return (
<nav className="buttons">
<button onClick={prevSlide}> Previous </button>
<button onClick={nextSlide}> Next </button>
</nav>
);
}
function Main() {
const slides = [<Slide1 />, <Slide2 />];
const [index, setIndex] = useState(0);
return (
<main>
<Presentation slides={slides} index={index} />
<Buttons index={index} setIndex={setIndex} size={slides.length} />
</main>
);
}
export default Main;
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句