基于className的条件渲染

Question

I want to conditionally render an element base on whether or not its previous sibling has a certain className.

The Nav.Link receives a className of "is-active" when the user is at the href="" position on that Nav.Link on the page (this is achieved by 3rd party library).

I want to render a Coin element after Nav.Link inside of their parent Nav.Item based on whether or not the Nav.Link has the className "is-active".

I don't know how to do this.

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);
    this.state = {

    };
  }

  render() {
    return (
      <Row className="lrg-nav-container">
        <Col className="d-flex align-items-center justify-content-center">
          <ScrollspyNav
            scrollTargetIds={["about-me", "work", "skills"]}
            activeNavClass="is-active"
            scrollDuration="1000"
            headerBackground="true"
          >
            <Nav>
              <Nav.Item className="d-flex align-items-center">
                <Nav.Link
                  className="about-me is-active lrgNavItem pl-4 pr-0"
                  href="#about-me"
                >
                  About Me
                </Nav.Link>
                {/* this is where I'd like to render a <Coin/> element based on if the previous sibling <Nav.Link className="is-active"> is true */}
              </Nav.Item>
              <Nav.Item className="d-flex align-items-center">
                <Nav.Link className="lrgNavItem pl-4 pr-0" href="#work">
                  Work
                </Nav.Link>
                {/* this is where I'd like to render a <Coin/> element based on if the previous sibling <Nav.Link className="is-active"> is true */}
              </Nav.Item>
              <Nav.Item className="d-flex align-items-center">
                <Nav.Link className="lrgNavItem pl-4 pr-0" href="#skills">
                  Skills
                </Nav.Link>
                {/* this is where I'd like to render a <Coin/> element based on if the previous sibling <Nav.Link className="is-active"> is true */}
              </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 is where I'd like to render a <Coin/> element based on if the previous sibling <Nav.Link className="is-active"> is true */}
              </Nav.Item>
              <Nav.Item className="d-flex align-items-center">
                <Nav.Link className="lrgNavItem pl-4 pr-0" href="#contact">
                  Contact
                </Nav.Link>
                {/* this is where I'd like to render a <Coin/> element based on if the previous sibling <Nav.Link className="is-active"> is true */}
              </Nav.Item>
            </Nav>
          </ScrollspyNav>
        </Col>
      </Row>
    );
  }
}

export default LrgNav;

Answer 1

You could abstract the Nav.Item out to a function to handle it for you:

const NavItemAndCoin = () => {
  const isActive = someDeterminationForActivity();
  const classes = `about-me lrgNavItem pl-4 pr-0 ${isActive ? 'is-active'}`;
  return (
    <Nav.Item className="d-flex align-items-center">
      <Nav.Link
        className={classes}
        href="#about-me"
      >
        About Me
      </Nav.Link>
      {isActive && <Coin ... />}
    </Nav.Item>
  );
}

Then you can use NavItemAndCoin in place of NavItem

<NavItemAndCoin />

You would still need to work out some method to get the position (ie, the someDeterminationForActivity() method).