【发布时间】：2021-05-07 06:00:14
【问题描述】：
祝所有有兴趣看到这篇文章的人愉快！
您好，我一直在开发一个 React 应用程序，并且很高兴能够进行引导模板集成。事情是一切正常，但模板的响应性并没有产生任何动画，它只是具有外观。
工作索引示例： animation when scroll down
不工作的反应组件示例：
索引代码是这个：
<!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="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<!-- Favicon -->
<link rel="icon" href="img/core-img/favicon.ico">
<!-- Core Stylesheet -->
<link rel="stylesheet" href="%PUBLIC_URL%/style.css">
<!-- ##### All Javascript Script ##### -->
<!-- jQuery-2.2.4 js -->
<script src="js/jquery/jquery-2.2.4.min.js"></script>
<!-- Popper js -->
<script src="js/bootstrap/popper.min.js"></script>
<!-- Bootstrap js -->
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- All Plugins js -->
<script src="js/plugins/plugins.js"></script>
<!-- Active js -->
<script src="js/active.js"></script>
</body>
</html>
Header.js 代码：
import React, { Component } from 'react'
import '../App.scss';
import 'bootstrap/dist/css/bootstrap.min.css';
export default class Header extends Component {
render() {
return (
<div>
{/* ##### Header Area Start ##### */}
<header className="header-area">
{/* Navbar Area */}
<div className="palatin-main-menu">
<div className="classy-nav-container breakpoint-off">
<div className="container">
{/* Menu */}
<nav className="classy-navbar justify-content-between" id="palatinNav">
{/* Nav brand */}
<a href="index.html" className="nav-brand"><img src="img/core-img/logo.png" alt /></a>
{/* Navbar Toggler */}
<div className="classy-navbar-toggler">
<span className="navbarToggler"><span /><span /><span /></span>
</div>
{/* Menu */}
<div className="classy-menu">
{/* close btn */}
<div className="classycloseIcon">
<div className="cross-wrap"><span className="top" /><span className="bottom" /></div>
</div>
{/* Nav Start */}
<div className="classynav">
<ul>
<li className="active"><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="#">Pages</a>
<ul className="dropdown">
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="rooms.html">Rooms</a></li>
<li><a href="blog.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="elements.html">Elements</a></li>
</ul>
</li>
<li><a href="#">Mega Menu</a>
<div className="megamenu">
<ul className="single-mega cn-col-4">
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="rooms.html">Rooms</a></li>
<li><a href="blog.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="elements.html">Elements</a></li>
</ul>
<ul className="single-mega cn-col-4">
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="rooms.html">Rooms</a></li>
<li><a href="blog.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="elements.html">Elements</a></li>
</ul>
<ul className="single-mega cn-col-4">
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="rooms.html">Rooms</a></li>
<li><a href="blog.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="elements.html">Elements</a></li>
</ul>
<ul className="single-mega cn-col-4">
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="rooms.html">Rooms</a></li>
<li><a href="blog.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="elements.html">Elements</a></li>
</ul>
</div>
</li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
{/* Button */}
<div className="menu-btn">
<a href="#" className="btn palatin-btn">Make a Reservation</a>
</div>
</div>
{/* Nav End */}
</div>
</nav>
</div>
</div>
</div>
</header>
{/* ##### Header Area End ##### */}
</div>
)
}
}
app.js 代码是这样的：
import logo from './logo.svg';
import './App.scss';
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import Header from './components/Header';
function App() {
return (
<div className="App">
<Header />
</div>
);
}
export default App;
我应该更改或安装什么
已经完成了“npm install bootstrap”“react-router-dom”“npm install node-sass”
想法不多了，希望有一些提示谢谢！！！
【问题讨论】：
标签： html css reactjs twitter-bootstrap