使用React的文本滑块前端
使用React的文本滑块前端
提问于 2020-08-03 23:24:38
我正在学习react的基础知识，目前我正在探索互联网上可用的某些问题陈述。一个这样的问题陈述要求我为文本幻灯片创建器创建一个react应用程序，并使用上一步、下一步和重置按钮。我可以创建到这里-我的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文件)立即呈现(也不用担心幻灯片的时间)。我知道我必须在这里使用状态改变，但我不知道如何proceed.Please帮助我。请原谅我没有正确地设计它的样式。我基本上是想先提供这个功能，然后再继续css部分。请帮我实现这一点。这会对我有很大帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-08-04 05:32:03
据我所知，你需要有一个作为current_slide的状态来保存你当前的幻灯片id。每当你按下下一步或上一步按钮时，你需要在应用程序()中触发一个函数，该函数通过你的MyComponent传递，这将改变你的current_slide值，你需要将它传递给你的幻灯片组件，以便可以显示出来。如果发生重置按钮事件，只需将current_slide的值设置为默认值即可。希望这能有所帮助。如果我理解错了，请纠正我。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63232295
复制相关文章
相似问题
腾讯云开发者
