在 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

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

function Presentation({slides,index}) {

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

}

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

Answer 2

试试这个。 (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 3

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

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

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

干杯！

Answer 4

我重写了你的一些代码，因为我不知道你的幻灯片背后到底是什么代码。我将它们定义为对我来说更容易的标签。

我更改了您的数组并在其中分配了 JSX： const slides = [<Slide1 />, <Slide2 />];

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

最后，您将 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;

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

Rendering Array element using index in React

javascript

arrays

reactjs

react-component

react-functional-component