我已经在Next.js项目中添加了bulma.css,并且运行良好,但是导航栏切换不起作用,因为需要添加一些纯JavaScript代码并且React无法提供纯DOM事件
答案 0 :(得分:0)
只需添加React Lifecycle事件并放入您的代码即可。
原始示例:
import React from "react";
class NavBar extends React.Component {
componentDidMount() {
const $navbarBurgers = Array.prototype.slice.call(
document.querySelectorAll(".navbar-burger"),
0
);
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(el => {
el.addEventListener("click", () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
}
}
render() {
return (
<nav className="navbar" role="navigation" aria-label="main navigation">
<div className="navbar-brand">
<a className="navbar-item" href="https://bulma.io">
<img
src="https://bulma.io/images/bulma-logo.png"
width="112"
height="28"
/>
</a>
<a
role="button"
className="navbar-burger burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true" />
<span aria-hidden="true" />
<span aria-hidden="true" />
</a>
</div>
<div id="navbarBasicExample" className="navbar-menu">
<div className="navbar-start">
<a className="navbar-item">Home</a>
<a className="navbar-item">Documentation</a>
<div className="navbar-item has-dropdown is-hoverable">
<a className="navbar-link">More</a>
<div className="navbar-dropdown">
<a className="navbar-item">About</a>
<a className="navbar-item">Jobs</a>
<a className="navbar-item">Contact</a>
<hr className="navbar-divider" />
<a className="navbar-item">Report an issue</a>
</div>
</div>
</div>
<div className="navbar-end">
<div className="navbar-item">
<div className="buttons">
<a className="button is-primary">
<strong>Sign up</strong>
</a>
<a className="button is-light">Log in</a>
</div>
</div>
</div>
</div>
</nav>
);
}
}
export default NavBar;
答案 1 :(得分:0)
我遇到了相同的问题,就我而言,我可以通过在_app组件中添加以下行来解决该问题
import 'bulma/css/bulma.css