使用 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 的值设置为默认值即可。希望有所帮助。如果我误解了，请纠正我。