javascript - 将图标添加到标题导航栏（我不知道如何在导航栏的最左侧添加图标）

Question

将图标添加到标题导航栏我不知道如何在导航栏的最左侧添加图标。这是 NavBar.js 的自定义类。我想在最左边的这个栏中有一个图标。我已经添加了带有链接的按钮，它们位于导航栏的中心我希望图标 .png 出现在导航栏的最左侧 请帮助！

      import React, { Component } from 'react'
      import { Link, withRouter } from 'react-router-dom'

      class Navbar extends Component {
          logOut (e) {
              e.preventDefault()
              localStorage.removeItem('usertoken')
              this.props.history.push(`/`)
          }

          render () {
              const loginRegLink = (
                  <ul className="navbar-nav">
                      <li className="nav-item">
                          <Link to="/login" className="nav-link">
                              Login
                          </Link>
                      </li>
                      <li className="nav-item">
                          <Link to="/my" className="nav-link">
                              my
                          </Link>
                      </li>
                      <li className="nav-item">
                          <Link to="/register" className="nav-link">
                              Register
                          </Link>
                      </li>
                  </ul>
              )

              const userLink = (
                  <ul className="navbar-nav">
                      <li className="nav-item">
                          <Link to="/profile" className="nav-link">
                              User
                          </Link>
                      </li>
                      <li className="nav-item">
                          <a href="#" onClick={this.logOut.bind(this)} className="nav-link">
                              Logout
                          </a>
                      </li>
                  </ul>
              )

              return (
                  <nav className="navbar navbar-expand-lg navbar-dark bg-dark rounded">
                      <button className="navbar-toggler"
                          type="button"
                          data-toggle="collapse"
                          data-target="#navbar1"
                          aria-controls="navbar1"
                          aria-expanded="false"
                          aria-label="Toggle navigation">
                          <span className="navbar-toggler-icon"></span>
                      </button>

                      <div className="collapse navbar-collapse justify-content-md-center"
                          id="navbar1">
                          <ul className="navbar-nav">
                              <li className="nav-item">
                                  <Link to="/" className="nav-link">
                                      Home
                                  </Link>
                              </li>
                          </ul>
                          {localStorage.usertoken ? userLink : loginRegLink}
                      </div>
                  </nav>
              )
          }
      }

      export default withRouter(Navbar)
  ```

标签： javascriptreactjsreact-native

Answer 1

应用程序.js

import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";

class Navbar extends Component {
  logOut(e) {
    e.preventDefault();
    localStorage.removeItem("usertoken");
    this.props.history.push(`/`);
  }

  render() {
    const loginRegLink = (
      <ul className="navbar-nav">
        <li className="nav-item">
          <Link to="/login" className="nav-link">
            Login
          </Link>
        </li>
        <li className="nav-item">
          <Link to="/profile" className="nav-link">
            Profile
          </Link>
        </li>
        <li className="nav-item">
          <Link to="/register" className="nav-link">
            Register
          </Link>
        </li>
      </ul>
    );

    const userLink = (
      <ul className="navbar-nav">
        <li className="nav-item">
          <Link to="/profile" className="nav-link">
            User
          </Link>
        </li>
        <li className="nav-item">
          <Link onClick={this.logOut.bind(this)} className="nav-link">
            Logout
          </Link>
        </li>
        {/* Dropdown */}
        <li className="nav-item dropdown">
          <Link
            className="nav-link dropdown-toggle"
            id="navbardrop"
            data-toggle="dropdown"
          >
            Dropdown link
          </Link>
          <div className="dropdown-menu">
            <Link className="dropdown-item" href="#">
              Link 1
            </Link>
            <Link className="dropdown-item" href="#">
              Link 2
            </Link>
            <Link className="dropdown-item" href="#">
              Link 3
            </Link>
          </div>
        </li>
      </ul>
    );

    return (
      <nav className="navbar navbar-expand-md bg-dark navbar-dark">
        <Link className="navbar-brand">
          <img
            src="https://via.placeholder.com/50"
            alt="Logo"
            className="img-thumbnail"
          />
        </Link>
        <button
          className="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#collapsibleNavbar"
        >
          <span className="navbar-toggler-icon" />
        </button>

        <div
          className="collapse navbar-collapse justify-content-md-center"
          id="collapsibleNavbar"
        >
          {localStorage.usertoken ? userLink : loginRegLink}
        </div>
      </nav>
    );
  }
}

export default withRouter(Navbar);

index.js

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Nav from "./App";

const App = props => (
  <Router>
    <div>
      <Nav />
      <Route exact path="/" />
    </div>
  </Router>
);

render(<App />, document.getElementById("root"));

嗨，请检查最左边的添加图标的链接。