Интерфейс текстовых слайдеров с использованием React - PullRequest
Новая
       35

Интерфейс текстовых слайдеров с использованием React

0 голосов
/ 03 августа 2020

Я изучаю основы реакции и в настоящее время изучаю некоторые постановки проблем, доступные на rnet intex. Одна из таких постановок проблемы потребовала от меня создать приложение для реагирования для создателя текстовых слайдов с кнопками «Назад», «Далее» и «Сброс». Мне удалось создать до этого момента - файл My 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, в котором я использую sh для рендеринга текстовых слайдов, выглядит примерно так - 

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




export default slidesData

У меня есть базовые c знания о состояниях, свойствах и компонентах useEffect (), а также функциональных и классовых компонентах. Я хочу использовать кнопки для изменения слайда на предыдущий, следующий или сбросить и, соответственно, хочу, чтобы этот слайд (только из файла json) отображался сразу (также не беспокоясь о времени слайдов на данный момент). Я знаю, что здесь нужно использовать изменение состояния, но я не знаю, что делать дальше. Пожалуйста, помогите мне. пожалуйста, извините за неправильную укладку. Я в основном хотел предоставить эту функциональность, а затем перейти к части css. Пожалуйста, помогите мне добиться этого. Это бы мне очень помогло.

1 Ответ

1 голос
/ 04 августа 2020

Насколько я понял, вам нужно иметь состояние current_slide, которое будет содержать ваш текущий идентификатор слайда. всякий раз, когда вы нажимаете следующую или предыдущую кнопку, вам нужно запускать функцию в App (), которая передается через ваш MyComponent и которая изменит ваше значение current_slide, и вам нужно передать это в компонент слайда, чтобы его можно было показать. В случае нажатия кнопки сброса просто установите значение current_slide на значение по умолчанию. Надеюсь, это поможет. Если я неправильно понял, поправьте меня, пожалуйста.

...