Question

我正在尝试在网站上构建一种不同组件的幻灯片放映。我已将所需的幻灯片作为单个元素导入，并将它们存储在数组中。我已经编写了基本结构，但是不知道如何使用索引来呈现存储在数组中的组件。

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;

但这不起作用。有没有人有正确或更好的方法来做到这一点？

Answer 1

我重新编写了您的一些代码，因为我不完全知道幻灯片背后是什么代码。我将它们定义为标签，以使我更轻松。

我更改了数组并在其中分配了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;

Answer 2

我认为您不是在调用prevSlide和nextSlide函数，只是在不传递索引的情况下返回它们。

   <nav className="buttons">
      <button onClick={()=>prevSlide(index)}> Previous </button>
      <button onClick={()=>nextSlide(index)}> Next </button>
   </nav>

此外，我建议将这些函数的参数名称更改为index以外的名称，因为它与Buttons组件的索引属性相同。这可能会导致混乱。

干杯！

Answer 3

尝试一下。（Link to stackblitz）

问题-1.按钮参数名称为size，其中的传递参数为length

import React, {useState} from 'react';
const Slide1  = <div> 1 </div>;
const Slide2  = <div> 2 </div>;
const Slide3  = <div> 3 </div>;
const Slide4  = <div> 4 </div>;
const Slide5  = <div> 5 </div>;

function Presentation({slides,index}) {
    return(
        <div className="presentation">
            <React.Fragment key={index}> {slides[index]} </React.Fragment>  
        </div>
    )
}

function Buttons({index, setIndex, length}) {
    const nextSlide = () => {
      console.log('next', index, length)
       if (index < (length - 1)) {
        setIndex(index + 1)
       }
    }
    const prevSlide = () => {
       console.log('prev', index)
       if (index > 0) {
        setIndex(index - 1)
       }
    }
    return(
        <nav className="buttons">
            <button onClick={() => prevSlide()}> Previous </button>
            <button onClick={() => 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;

Answer 4

您可以使用键和索引映射值以提供所需的内容

function Presentation({slides,index}) {

return(
    <div className="presentation">
        { slides.map((key, index) => <Slide key={key} index={index} /> }
    </div>
)

}

我只是将您的更改为幻灯片组件

在React中使用索引渲染数组元素

4 个答案: