是否可以将这些html引导转移到react应用程序？_Html_Reactjs_Bootstrap 4

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

html reactjs bootstrap-4

是否可以将这些html引导转移到react应用程序？,html,reactjs,bootstrap-4,Html,Reactjs,Bootstrap 4,假设我的html项目中有这个作为标题 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SHOP</title>

假设我的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应用程序中吗？如果是，怎么做？我试着将所有样式表放在react应用程序的html文件中，但它不起作用

这是“公共”下react应用程序的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>


-->
通过运行“npm运行生成”来创建URL。
-->
商店
您需要启用JavaScript才能运行此应用程序。

这是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;

const头=（道具）=>{
返回(
{/*  */}
切换导航










);
};
导出默认标题；

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

您需要在React JS文件中使用类名，而不是公共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;

const头=（道具）=>{
返回(
切换导航










);
};
导出默认标题；

在react中，您必须使用className而不是class。你导入了引导css文件吗？是的，在publicI下的react应用程序的html中已经导入了，但是引导并没有反映在设计上。