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

Question

我关于 SO 的第一个问题让我们看看情况如何。

我正在尝试将“活动类”设置为我的 Home.js 中的一个变量，并将该值作为道具传递给我的<Buddy />组件。在那里，我将其设置为一个整数来决定我的文本轮播转到哪张幻灯片。我会弄清楚那部分（但如果你知道，请给我留点时间）。

单击后，我正在使用 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/Portfolio 上的每个组件都有一个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>

我只想将我需要的任何内容设置为变量 inHome.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;

标签： javascripthtmlreactjsnpm