使用 React 的文本滑块前端

Question

我正在学习 React 的基础知识，目前正在探索 Internet 上可用的某些问题陈述。一个这样的问题陈述要求我为带有上一个、下一个和重置按钮的文本幻灯片创建者创建一个反应应用程序。我能够创造到这里 - 我的 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() 组件以及功能组件和 class 组件有基本的了解。我想使用按钮将幻灯片更改为上一张、下一张或重置，并分别希望立即呈现该幻灯片（仅来自 json 文件）（现在也不担心幻灯片的时间安排）。我知道我必须在这里使用状态更改，但我不知道如何 proceed.Please 帮助我。请原谅我没有正确设计它。我基本上想提供此功能，然后继续 css 部分。请帮助我实现这一目标。这对我有很大帮助。

Answer 1

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

使用 React 的文本滑块前端

Text Sliders front-end using React

javascript

json

reactjs

react-native

react-dom