Блог

Главная - Вопросы по программированию - Как получить доступ к индексу состояния реакции

Как получить доступ к индексу состояния реакции

#reactjs

#reactjs

Вопрос:

Я пытаюсь настроить слайдер карусели карточек, который отображал бы информацию о моих текущих курсах.

Я разобрался с большей частью логики, однако у меня возникли проблемы с двумя частями, первая — это доступ к индексу состояния, поэтому я устанавливаю текущее состояние в [0], а затем при нажатии на стрелку я бы переместил 1 или -1 в текущее состояние. Вторая проблема, с которой я сталкиваюсь, заключается в переносе изображения из файла данных на карту.

У меня есть три файла, там course-data.js который содержит данные, card.js у которого есть фактическая карта, и coursecards.js который будет содержать ползунок.

course-data.js 

 import {v4 as uuidv4} from 'uuid';

const CourseData = {

  "courses": [{
      _id: uuidv4(),
      image: "../assets/image.png",
      title: "Title Text",
      content: "Who are you? Why do you matter? Is it your contributions that give you distinction? Discover who you are, as an individual and a member of society."
    },

    {
      _id: uuidv4(),
      image: "../assets/image.png",
      title: "Title Text",
      content: "Who are you? Why do you matter? Is it your contributions that give you distinction? Discover who you are, as an individual and a member of society."
    },

    {
      _id: uuidv4(),
      image: "../assets/image.png",
      title: "Title Text",
      content: "Who are you? Why do you matter? Is it your contributions that give you distinction? Discover who you are, as an individual and a member of society."
    },
  ]
}

export default CourseData;

card.js 

 import React from 'react';
import styled from 'styled-components';
import coursedata from '../assets/data/course-data';

const CourseCard = styled.section `
    margin-right: 25px;
    transition: all .4s cubic-bezier(0.175, 0.885, 0, 1);
    background-color: #fff;
    width: 33.3%;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 13px 10px -7px rgba(0, 0, 0,0.1);
    font-family: var(--sans-serif);

    /* .card__image {
        background-image: url("");
    } */

   .card__img {
        visibility: hidden;
        width: 100%;
        height: 235px;
    }

    .card__image {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
        height: 235px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        top: 0;
    }

    .card__info {
        z-index: 2;
        background-color: #fff;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        padding: 16px 24px 44px 24px;
    }


    .card__title {
        margin-top: 5px;
        margin-bottom: 10px;
        font-family: var(--sans-serif);
        font-weight: var(--semibold);
        max-width: 70%;
    }

    .card__content {
        font-size: var(--paragraph);
        color: var(--grey-medium);
        line-height: 1.7;
    }

    .card__learn {
        font-weight: 600;
        text-decoration: none;
        color: var(--main-color);

        amp;:hover {
            color: var(--secondary-color);
        }
    }

`

const Card = ({course}) => {
    const {image, title, content} = course;

    return(
        <CourseCard>
            <div className="card__img"></div>
                <a href="" className="card_link">
                    <div className="card__image" style={{background: `url(${image})`}}></div>
                    {/* <CourseImage url={image}/> */}
                </a>

                <div className="card__info">
                    <h3 className="card__title">
                        {title}
                        </h3>
                    <p className="card__content">
                        {content}
                        </p>
                    <p>amp;nbsp;</p>
                    <a href="#" className="card__learn">learn more</a>
                </div>
        </CourseCard>
    )
}

export default Card

coursecards.js 

 import React, {useState} from 'react';
import styled from 'styled-components';
import CourseCard from '../partials/card';
import CourseData from '../assets/data/course-data';

const CourseCards = () => {

    const [courses, course] = useState(CourseData.courses, CourseData.courses[0])
    
    const nextCourse = () => {
        
        //Add Index to store current index  1
        const newIndex = CourseData.course.index   1;//?? get current index and add one ??
        
        // Reassign course
        course(
            CourseData.courses[newIndex]
        )
    }

    const prevCourse = () => {
        
        const newIndex = //?? get current index and subtract one ??
        
        // Reassign course
        course(
            CourseData.courses[newIndex]
        )
    }

    return(
        
        <div>

            <button 
                onClick={() => nextCourse()} 
                disabled={course.index === CourseData.courses.length-1}
            >Next</button>
            
            <button 
                onClick={() => prevCourse()} 
                disabled={course.index === 0}
            >Prev</button>

        
            <div className="col">
                <div className={`cards-slider active-slide-${course.index}`}> 
                    <div className="cards-slider-wrapper" style={{
                        'transform': `translateX(-${course.index*(100/courses.length)}%)`
                        }}>

                        {courses.map(course => <CourseCard key={course._id} course={course}/>)}
                    </div>
                </div>
            </div>
        </div>
    )
}

export default CourseCards

Любая помощь или направление были бы высоко оценены!

Ответ №1:

привет, вы можете пройти через .map((item, index) => ...) 

 {
 courses.map((course, index) => 
   <CourseCard key={course._id} index={index} course={course}/>)
}

Комментарии:

1. Привет, спасибо за это. Все еще не могу понять, как мне получить доступ к этому индексу для моих функций nextCourse и prevCourse? Спасибо

2. вы можете получить доступ к индексу с помощью свойства length, prev = index — courses. длина — 1 следующий = индекс курсы. длина 1