javascript - 在 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;

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

标签： javascriptarraysreactjsreact-componentreact-functional-component

Answer 1

我重写了您的一些代码，因为我不确切知道您的幻灯片背后的代码。我将它们定义为标签对我来说更容易。

我改变了你的数组并在里面分配了 JSX： const slides = [<Slide1 />, <Slide2 />];

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

最后，您将lengthMain 组件中的 props 传递给Button组件，但您的Button组件从sizeprops 中读取。

希望它会有所帮助

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;