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

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 />];

我从Button 组件中的许多代码中删除了index，因为您将它作为道具传递。

最后，您将 length 作为 Main 组件中的道具传递给您的 Button 组件，但您的 Buttoncomponent 是从 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 组件的 index 属性相同。这可能会导致混乱。

干杯！

Answer 3

试试这个。 (Link to stackblitz)

问题 - 1. Buttons 参数名称为 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>
)

}

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