Блог

Мой первый вопрос о S.O. давайте посмотрим, как это происходит.

Я пытаюсь установить для «активного класса» переменную в моем Home.js , и передайте значение в качестве реквизита моему <Buddy /> компоненту. После этого я установлю для него значение integer, чтобы решить, на какой слайд переходит моя текстовая карусель. Я разберусь с этой частью (но если вы знаете, уделите мне время).

Я использую пакет npm react-scroll для перехода к этому компоненту после нажатия. Затем компоненту присваивается значение «активный». Я отброшу некоторый код.

1. Раздел панели навигации в Home.js компонент..

 return (
<div className="navBar">

   <div className="navItem">
        <Link
           activeClass='active'
           to="home"
           spy={true}
           smooth={true}
           offset={0}
           className='nav-Link'>
            <h2>Home</h2>
        </Link>
    </div>
       
    <div className="navItem">
       <Link
           activeClass='active'
           to="projects"
           spy={true}
           smooth={true}
           offset={0}
           className='nav-Link'>
               Projects
        </Link>
     </div>
       
     <div className="navItem">
       <Link
           activeClass='active'
           to="mission"
           spy={true}
           smooth={true}
           offset={0}
           className='nav-Link'>
               Mission
        </Link>
      </div>
       
     <div className="navItem">
       <Link
           activeClass='active'
           to="about"
           spy={true}
           smooth={true}
           offset={0}
           className='nav-Link'>
               About
        </Link>
     </div>
       
     <div className="navBar">
       <Link
           activeClass='active'
           to="contact"
           spy={true}
           smooth={true}
           offset={0}
           className='nav-Link'>
               Contact
        </Link>
     </div>

</div>
 

2. Мой компонент находится прямо под ним.

 <Buddy />
 

3. У каждого компонента в моем SPA / портфолио есть id объект, к которому, похоже, ведет моя панель навигации.

 //Projects.js

const Projects = () => {
    return (
        <div className="projectsComponent" id="projects">
            
        </div>
    )
}
 

Итак, когда он переходит к компоненту, он устанавливает этот div? или компонент? в активный.

 // back in Home.js

<div className="navItem">
        <Link
            activeClass='active' <-----------
            to="projects"
            spy={true}
            smooth={true}
            offset={0}
            className='nav-Link'>
                Projects
            </Link>
        </div>
 

Я просто хочу установить все, что мне нужно, в переменную, Home.js чтобы передать ее в качестве реквизита <Buddy /> . Спасибо, ребята! Помните, что это мой первый вопрос! Будь милым!

** Если у вас есть идея получше, например, когда прокрутка достигнет этого компонента, установите индекс моей карусели равным 1,2,3 .. дайте мне тоже знать. Спасибо

*** Я также включу <SpeechCarousel /> сюда свой компонент. Он живет в моем <Buddy /> компоненте, и я передам ему другой реквизит. Еще раз спасибо.

 import React, {useState} from 'react'
import Carousel from 'react-bootstrap/Carousel'
import "../styles/css/Buddy.css"

const SpeechCarousel = () => {
    const [index, setIndex] = useState(0);
  
    const handleSelect = (selectedIndex, e) => {
      setIndex(selectedIndex);
    };

    return (
        <div id="carousel2">
      <Carousel activeIndex={index} onSelect={handleSelect} interval={null}>
        
        <Carousel.Item className="car2item">
          <p>TEXT</p>
        </Carousel.Item>

        <Carousel.Item className="car2item">
        <p>TEXT</p>
        </Carousel.Item>

        <Carousel.Item className="car2item">
        <p>TEXT</p>
        </Carousel.Item>

        <Carousel.Item className="car2item">
        <p>TEXT</p>
        </Carousel.Item>

        <Carousel.Item className="car2item">
        <p>TEXT</p>
        </Carousel.Item>

     </Carousel>

      </div>
    )
}
export default SpeechCarousel;