使用 React 的文本滑块前端

Question

我正在学习反应的基础知识，目前正在探索互联网上提供的某些问题陈述。一个这样的问题陈述要求我为带有上一个、下一个和重置按钮的文本幻灯片创建者创建一个反应应用程序。我能够创建到这里 - 我的 app.js 文件看起来像这样 -

import React from 'react';

import MyComponent from './MyComponent'

import slidesData from './slidesData'

import SlideComponent from './SlideComponent'

import './App.css';

function App(){

const slidestate=slidesData.map(slide=><SlideComponent key={slide.id} sli={slide}/>)

return(

<div id="main-div">

  {slidestate}

<MyComponent />

  

</div>

)

}

export default App;

我的 SlideComponent.js 看起来像 -

import React from 'react'

function SlideComponent(props){

return(

    <div>

    <h1>{props.sli.title}</h1>

    <p>{props.sli.description}</p>

    </div>

)

}

export default SlideComponent

我的“MyComponent.js”看起来像这样 -

import React from 'react'

function MyComponent(){

return(

    <div>

        <button>Reset</button>

        

        <button>Previous</button>

     

        <button>Next</button>

        

    </div>

)

}

export default MyComponent

我希望从中呈现文本幻灯片的 JSON 文件看起来像 -

const slidesData = [{id:1,title:"title1",description:"hello first slide"},{id:2,title:"title2",description:"hello second slide"}]

export default slidesData

我对状态和道具以及 useEffect() 组件以及功能和类组件有基本的了解。我想使用按钮将幻灯片更改为上一个、下一个或重置，并分别希望立即呈现该幻灯片（仅来自 json 文件）（现在也不担心幻灯片的时间安排）。我知道我必须在这里使用状态更改，但我不知道如何进行。请帮助我。请原谅我没有正确设计它。我基本上想提供这个功能，然后继续 css 部分。请帮助我实现这一目标。这对我有很大帮助。

Answer 1

据我了解，您需要有一个 current_slide 状态来保存您当前的幻灯片 ID。每当您按下下一个或上一个按钮时，您需要触发 App() 中的一个函数，该函数通过您的 MyComponent 传递，这将更改您的 current_slide 值，您需要将其传递给幻灯片组件以便显示。在重置按钮按下事件的情况下，只需将 current_slide 的值设置为默认值即可。希望有所帮助。如果我误解了，请纠正我。