是否可以将这些 html 引导程序转移到反应应用程序？答案

【问题标题】：Is it possible to just transfer these html bootstrap to a react app?是否可以将这些 html 引导程序转移到反应应用程序？
【发布时间】：2021-08-14 06:46:15
【问题描述】：

假设我在我的 html 项目中有这个作为标题

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SHOP</title>
    <!--logo-->
    <link rel="shortcut icon" href="assets/logo.png"/>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,700">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cookie">
    <link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/css/lightbox.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body class="nav">
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand navbar-link" href="#"><img src="assets/shop.png" id="logo"></a>
                <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
            </div>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active" role="presentation"><a href="index.html">Cakes </a></li>
                    <li role="presentation"><a href="cart.html">My Cart </a></li>
                    <li role="presentation"><a href="#">Login</a></li>
                    <li role="presentation"><a href="#">Register</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox-plus-jquery.min.js"></script>
</body>

</html>

我可以直接复制粘贴到我的反应应用程序中吗？如果是这样，怎么办？我尝试将所有样式表放在 react 应用程序的 html 文件中，但它不起作用。

这是react app在public下的html文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="SHOP"
    />
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" 
    integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 
    crossorigin="anonymous">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,700">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cookie">
    <link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/css/lightbox.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
  
URL by running `npm run build`.
    -->
    <title>SHOP</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

这是 header.js

const Header = (props) => {

  return (
    <div class="nav">
      <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
          <div class="navbar-header">
            {/* <a class="navbar-brand navbar-link" href="#">
              <img src="assets/sweetara1.png" id="logo" />
            </a> */}
            <button
              class="navbar-toggle collapsed"
              data-toggle="collapse"
              data-target="#navcol-1"
            >
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          </div>
          <div class="collapse navbar-collapse" id="navcol-1">
            <ul class="nav navbar-nav navbar-right">
              <li class="active" role="presentation">
                <a href="index.html">Cakes </a>
              </li>
              <li role="presentation">
                <a href="cart.html">My Cart </a>
              </li>
              <li role="presentation">
                <a href="#">Login</a>
              </li>
              <li role="presentation">
                <a href="#">Register</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  );
};



export default Header;

没有错误，但同时没有显示所有的链接和设计。

【问题讨论】：

在反应中你必须使用 className 而不是 class。你是否导入了引导 css 文件？
是的，已经在 public 下的 react 应用的 html 中做了

标签： html reactjs bootstrap-4

【解决方案1】：

您需要在 React JS 文件中使用 className，而不是公共 html 文件。除此之外，您似乎已经注释掉了标题左上角的导航栏链接。

header.js 文件应如下所示。

const Header = (props) => {
  return (
    <div className="nav">
      <nav className="navbar navbar-inverse navbar-fixed-top">
        <div className="container">
          <div className="navbar-header">
            <a className="navbar-brand navbar-link" href="#">
              <img src="assets/sweetara1.png" id="logo" />
            </a>
            <button
              className="navbar-toggle collapsed"
              data-toggle="collapse"
              data-target="#navcol-1"
            >
              <span className="sr-only">Toggle navigation</span>
              <span className="icon-bar"></span>
              <span className="icon-bar"></span>
              <span className="icon-bar"></span>
            </button>
          </div>
          <div className="collapse navbar-collapse" id="navcol-1">
            <ul className="nav navbar-nav navbar-right">
              <li className="active" role="presentation">
                <a href="index.html">Cakes </a>
              </li>
              <li role="presentation">
                <a href="cart.html">My Cart </a>
              </li>
              <li role="presentation">
                <a href="#">Login</a>
              </li>
              <li role="presentation">
                <a href="#">Register</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  );
};

export default Header;

【讨论】：

我这样做了，但引导程序没有反映设计。