在 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组件，但您的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组件的 index 属性相同。 这可能会导致混乱。

干杯!

Answer 3

尝试这个。 （链接到stackblitz ）

问题 - 1. Buttons 参数名称是作为length传递的size

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

您可以使用键和索引对值进行 map 以提供您需要的

function Presentation({slides,index}) {

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

}

我只是将您的 <React.Fragment> 更改为幻灯片组件