我正在學習反應的基礎知識,目前正在探索互聯(lián)網(wǎng)上提供的某些問題陳述。一個這樣的問題陳述要求我為帶有上一個、下一個和重置按鈕的文本幻燈片創(chuàng)建者創(chuàng)建一個反應應用程序。我能夠創(chuàng)建到這里 - 我的 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我希望從中呈現(xiàn)文本幻燈片的 JSON 文件看起來像 -const slidesData = [{id:1,title:"title1",description:"hello first slide"},{id:2,title:"title2",description:"hello second slide"}]export default slidesData我對狀態(tài)和道具以及 useEffect() 組件以及功能和類組件有基本的了解。我想使用按鈕將幻燈片更改為上一個、下一個或重置,并分別希望立即呈現(xiàn)該幻燈片(僅來自 json 文件)(現(xiàn)在也不擔心幻燈片的時間安排)。我知道我必須在這里使用狀態(tài)更改,但我不知道如何進行。請幫助我。請原諒我沒有正確設計它。我基本上想提供這個功能,然后繼續(xù) css 部分。請幫助我實現(xiàn)這一目標。這對我有很大幫助。
使用 React 的文本滑塊前端
蕪湖不蕪
2022-12-18 16:19:51