基于className的条件渲染：根据Nav.Link的is-active类渲染Coin组件

The key here is to avoid directly checking the DOM for the is-active class (which isn’t very React-friendly) and instead track the active section using React state. Since you’re using react-scrollspy-nav, we can leverage its built-in callback to keep our state in sync with the library’s active item tracking.

Here’s how to implement it step by step:

1. Add state to track the active section
   Initialize your component’s state with the default active section (about-me in your case) to match your initial markup.

2. Use ScrollspyNav’s onActiveChange callback
   This prop triggers a function whenever the active nav item changes. We’ll use it to update our state with the ID of the currently active section.

3. Conditionally render <Coin/> based on state
   For each Nav.Item, check if the current section ID matches the active state value, and render the <Coin/> component only when there’s a match.

Modified Component Code #

import React, { Component } from "react";
import Nav from "react-bootstrap/Nav";
import "./lrg-nav.styles.scss";
import { Row, Col } from "react-bootstrap";
import ScrollspyNav from "react-scrollspy-nav";
import Coin from "./coin-spinner/coin-spinner.component";

class LrgNav extends Component {
  constructor(props) {
    super(props);
    // Initialize with the default active section
    this.state = { activeSection: "about-me" };
  }

  render() {
    return (
      <Row className="lrg-nav-container">
        <Col className="d-flex align-items-center justify-content-center">
          <ScrollspyNav
            scrollTargetIds={["about-me", "work", "skills", "aFewWords", "contact"]}
            activeNavClass="is-active"
            scrollDuration="1000"
            headerBackground="true"
            // Update state when the active section changes
            onActiveChange={(activeId) => this.setState({ activeSection: activeId })}
          >
            <Nav>
              <Nav.Item className="d-flex align-items-center">
                <Nav.Link className="about-me lrgNavItem pl-4 pr-0" href="#about-me" >
                  About Me
                </Nav.Link>
                {/* Render Coin if this section is active */}
                {this.state.activeSection === "about-me" && <Coin />}
              </Nav.Item>
              <Nav.Item className="d-flex align-items-center">
                <Nav.Link className="lrgNavItem pl-4 pr-0" href="#work">
                  Work
                </Nav.Link>
                {this.state.activeSection === "work" && <Coin />}
              </Nav.Item>
              <Nav.Item className="d-flex align-items-center">
                <Nav.Link className="lrgNavItem pl-4 pr-0" href="#skills">
                  Skills
                </Nav.Link>
                {this.state.activeSection === "skills" && <Coin />}
              </Nav.Item>
              <Nav.Item className="d-flex align-items-center">
                <Nav.Link className="lrgNavItem pl-4 pr-0" href="#aFewWords">
                  A Few Words
                </Nav.Link>
                {this.state.activeSection === "aFewWords" && <Coin />}
              </Nav.Item>
              <Nav.Item className="d-flex align-items-center">
                <Nav.Link className="lrgNavItem pl-4 pr-0" href="#contact">
                  Contact
                </Nav.Link>
                {this.state.activeSection === "contact" && <Coin />}
              </Nav.Item>
            </Nav>
          </ScrollspyNav>
        </Col>
      </Row>
    );
  }
}

export default LrgNav;

Why this works: #

• We’re using React’s state management to handle active section tracking, which aligns with React’s declarative approach and avoids messy DOM queries.
• The onActiveChange callback ensures our state stays in sync with react-scrollspy-nav’s internal logic.
• The conditional rendering is clean and easy to maintain—each <Coin/> only appears when its corresponding section is active.

Alternative: DOM-based check (not recommended) #

If for some reason you can’t use the onActiveChange callback, you could use refs to check the is-active class directly on the DOM element. This is less ideal because it bypasses React’s state system, but here’s a quick example for reference:

// Add refs in the constructor
constructor(props) {
  super(props);
  this.aboutMeRef = React.createRef();
}

// In render, check the ref's class list
{this.aboutMeRef.current?.classList.contains('is-active') && <Coin />}

// Attach the ref to the Nav.Link
<Nav.Link ref={this.aboutMeRef} className="about-me lrgNavItem pl-4 pr-0" href="#about-me" >
  About Me
</Nav.Link>

Stick with the state-based approach whenever possible—it’s more maintainable and fits better with React’s design principles.

内容的提问来源于stack exchange，提问作者lukem