基于类名的条件渲染

Question

我想根据元素的前一个兄弟元素是否具有特定的类名来有条件地渲染元素。

当用户位于页面上 Nav.Link 上的 href="" 位置时，Nav.Link 会收到“is-active”的 className（这是由 3rd 方库实现的）。

我想根据 Nav.Link 是否具有类名“is-active”，在其父 Nav.Item 内的 Nav.Link 之后呈现一个 Coin 元素。

我不知道该怎么做。

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

您可以将 Nav.Item 抽象为一个函数来为您处理它：

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>
  );
}

然后你可以使用 NavItemAndCoin 代替 NavItem

<NavItemAndCoin />

您仍然需要制定一些方法来获取位置（即 someDeterminationForActivity() 方法）。