Javascript 如何将活动类设置为变量-React

我关于S.O.的第一个问题，让我们看看进展如何

我试图将“活动类”设置为my Home.js中的一个变量，并将该值作为道具传递给我的

组件。一旦到了那里，我将把它设置为一个整数，以决定我的幻灯片将转到哪个位置。我会找出那部分的（但如果你知道的话，请给我一点时间）

我正在使用一个npm包在单击后滚动到该组件。然后该组件被设置为“活动”。我将删除一些代码

Home.js组件中的导航栏部分

所以当它滚动到组件时，它设置了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>

<Buddy />

//Projects.js

const Projects = () => {
    return (
        <div className="projectsComponent" id="projects">
            
        </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>

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;