更新 React 中“成为卖家”点击时的导航栏链接

Question

我面临着与动态更新导航栏链接相关的挑战。我希望当用户单击“成为卖家”链接时，导航栏显示“徽标”、“卖家主页”、“关于”和“销售产品”链接。

我正在使用React版本：“react-router-dom”：“^5.2.0”，“react”：“^16.13.1”。

问题描述：

• 我想根据用户操作动态更新导航栏链接，特别是当用户单击“成为卖家”链接时。
• 经过广泛的研究和反复试验，我无法找到解决此特定场景的明确解决方案或相关资源。

我尝试过的：

我浏览了各种教程和文档，但找不到与动态更新导航栏链接相关的清晰示例或解释。

我在寻找：

1. 当用户点击“成为卖家”时，如何动态更新导航栏以仅显示“徽标”、“卖家主页”、“关于”和“销售产品”链接？
2. 为了实现这种特定行为，我应该关注哪些 React 概念或功能？

Navbar.js：

import React, { Fragment, useState } from 'react';
import { Link, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { logout } from '../actions/auth';
import { MdKeyboardArrowDown } from 'react-icons/md';
import { FaCartArrowDown } from 'react-icons/fa';
import { Navbar as BootstrapNavbar, Nav } from 'react-bootstrap';

import './Navbar.css';

const MyNavbar = ({ logout, isAuthenticated }) => {
  const [redirect, setRedirect] = useState(false);

  const logout_user = () => {
    logout();
    setRedirect(true);
  };

  const guestLinks = () => (
    <Fragment>
      <li className='nav-item mr-3'>
        <Link className='nav-link' to='/login'>
          Login
        </Link>
      </li>
      <li className='nav-item mr-3'>
        <Link className='nav-link' to='/sellerhome'>
          Become a Seller
        </Link>
      </li>
    </Fragment>
  );

  const authLinks = () => (
    <li className='nav-item mr-3'>
      <a className='nav-link' href='#!' onClick={logout_user}>
        Logout
      </a>
    </li>
  );

  return (
    <Fragment>
      <BootstrapNavbar expand='lg' bg='light'>
        <Link className='navbar-brand' to='/'>
          Auth System
        </Link>
        <form className='form-inline d-1 d-lg-inline mr-5'>
          <input
            className='form-control mr-sm-1 custom-search-input'
            type='search'
            placeholder='Search'
            aria-label='Search'
          />
        </form>
        <BootstrapNavbar.Toggle aria-controls='navbarNav' />
        <BootstrapNavbar.Collapse id='navbarNav'>
          <Nav className='navbar-nav'>
            <li className='nav-item active mr-3'>
              <Link className='nav-link' to='/'>
                Home <span className='sr-only'>(current)</span>
              </Link>
            </li>

            {/* Add the Cart link */}
            <li className='nav-item mr-3'>
              <Link className='nav-link' to='/cart'>
                More
                <i className='moredown'>
                  <MdKeyboardArrowDown />
                </i>
              </Link>
            </li>
            <li className='nav-item mr-3'>
              <Link className='nav-link' to='/cart'>
                Cart
              </Link>
            </li>
            <li className='nav-item mr-3'>
              <Link className='nav-link' to='/cart'>
                <FaCartArrowDown />
              </Link>
            </li>
            {isAuthenticated ? authLinks() : guestLinks()}
          </Nav>
        </BootstrapNavbar.Collapse>
      </BootstrapNavbar>
      {redirect ? <Redirect to='/' /> : <Fragment></Fragment>}
    </Fragment>
  );
};

// ... (mapStateToProps and export)

const mapStateToProps = (state) => ({
  isAuthenticated: state.auth.isAuthenticated,
});

export default connect(mapStateToProps, { logout })(MyNavbar);

Answer 1

您正在寻找的概念是条件渲染。

重写代码以有条件地根据某些本地组件状态呈现一组“卖家链接”与正常的“导航链接”。

示例：

import React, { useState } from "react";
import { Link, useHistory } from "react-router-dom";
import { useDispatch, useSelector } from 'react-redux';
import { logout } from '../actions/auth';
import { MdKeyboardArrowDown } from "react-icons/md";
import { FaCartArrowDown } from "react-icons/fa";
import { Navbar as BootstrapNavbar, Nav } from "react-bootstrap";

const MyNavbar = () => {
  const history = useHistory();
  cost dispatch = useDispatch();
  const isAuthenticated = useSelector(state => state.auth.isAuthenticated);

  const [showSellerLinks, setShowSellerLinks] = useState(false);

  const logout_user = () => {
    dispatch(logout());
    history.replace("/");
  };

  const guestLinks = (
    <>
      <li className="nav-item mr-3">
        <Link className="nav-link" to="/login">
          Login
        </Link>
      </li>
      <li className="nav-item mr-3">
        <Link
          className="nav-link"
          to="/sellerhome"
          onClick={setShowSellerLinks.bind(null, true)}
        >
          Become a Seller
        </Link>
      </li>
    </>
  );

  const authLinks = (
    <li className="nav-item mr-3">
      <a className="nav-link" href="#!" onClick={logout_user}>
        Logout
      </a>
    </li>
  );

  const navLinks = (
    <>
      <li className="nav-item active mr-3">
        <Link className="nav-link" to="/">
          Home <span className="sr-only">(current)</span>
        </Link>
      </li>
      {/* Add the Cart link */}
      <li className="nav-item mr-3">
        <Link className="nav-link" to="/cart">
          More
          <i className="moredown">
            <MdKeyboardArrowDown />
          </i>
        </Link>
      </li>
      <li className="nav-item mr-3">
        <Link className="nav-link" to="/cart">
          Cart
        </Link>
      </li>
      <li className="nav-item mr-3">
        <Link className="nav-link" to="/cart">
          <FaCartArrowDown />
        </Link>
      </li>
      {isAuthenticated ? authLinks : guestLinks}
    </>
  );

  const sellerLinks = (
    <>
      <li className="nav-item active mr-3">
        <Link className="nav-link" to="/logo">
          Logo
        </Link>
      </li>
      <li className="nav-item mr-3">
        <Link className="nav-link" to="/sellerhome">
          Seller Home
        </Link>
      </li>
      <li className="nav-item mr-3">
        <Link className="nav-link" to="/about">
          About
        </Link>
      </li>
      <li className="nav-item mr-3">
        <Link className="nav-link" to="/sell-product">
          Sell a Product
        </Link>
      </li>
    </>
  );

  return (
    <>
      <BootstrapNavbar expand="lg" bg="light">
        <Link className="navbar-brand" to="/">
          Auth System
        </Link>
        <form className="form-inline d-1 d-lg-inline mr-5">
          <input
            className="form-control mr-sm-1 custom-search-input"
            type="search"
            placeholder="Search"
            aria-label="Search"
          />
        </form>
        <BootstrapNavbar.Toggle aria-controls="navbarNav" />
        <BootstrapNavbar.Collapse id="navbarNav">
          <Nav className="navbar-nav">
            {showSellerLinks ? sellerLinks : navLinks}
          </Nav>
        </BootstrapNavbar.Collapse>
      </BootstrapNavbar>
    </>
  );
};

export default MyNavbar;

演示

如何将

showSellerLinks

切换回 false，我将作为练习留给您解决应用程序的特定用例。