Bootstrap 4 个带有 React <Link/> 组件的导航栏
Bootstrap 4 NavBar with React <Link/> component
我正在尝试构建一个 Boostrap 4 NavBar
,它将使用来自 react-router 的 ReactJS <Link>
组件,而不是原来的 <li>
class。
目前我在正确构建组件时遇到了问题,因为最后 ReactJS 组件没有达到预期的行为。
让我们从 original Boostrap 4 NavBar example:
开始
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
正在将其迁移到 ReactJS 组件,如下所示:
import React from 'react';
import Link from 'react-router-dom/Link';
function Menu() {
return (
<div>
<nav className="navbar navbar-toggleable-md navbar-light bg-faded">
<button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<a className="navbar-brand" href="#">Navbar</a>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<span className="nav-item active">
<Link className="nav-link" to="/">Home <span className="sr-only">(current)</span></Link>
</span>
<span className="nav-item">
<Link className="nav-link" to="/counter">Counter</Link>
</span>
<span className="nav-item">
<Link className="nav-link disabled" to="/about">About</Link>
</span>
</ul>
<form className="form-inline my-2 my-lg-0">
<input className="form-control mr-sm-2" type="text" placeholder="Search" />
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
);
}
export default Menu;
尽管它可以运行,但许多格式都丢失了,并且 "nav-link disabled" 等某些功能无法使用(您可以单击“关于”,它会转到所需的页面)。
我确定我做错了转换,因此在此感谢您帮助修复组件代码,以便在没有 React 的情况下正确反映原始行为。
问题是 Bootstrap
也有一个 Javascript
组件,它在 React
中不起作用,因为它与 React's
Javascript
冲突。 CSS
部分有效,这就是您所看到的。
您应该使用类似 React-Bootstrap
- https://react-bootstrap.github.io/ 的内容。这些都是写成 React
组件的所有 Bootstrap
组件,因此您可以通过在 JSX
.
中导入和使用它们来以标准 React
方式使用它们
对于这个特定的用例,有一个简单的解决方案。
只需将此添加到您的 css:
.nav-link.disabled { pointer-events: none }
.
也就是说,我强烈建议长期使用基于 bootstrap 的 React 组件库。我个人喜欢https://reactstrap.github.io/.
也许你已经解决了。这是 Bootstrap 4:
的工作示例
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
const AppPage = () => <h1>React Router 4 & Bootstrap 4</h1>
const HomePage = () => <h1>Welcome Home !</h1>
const AboutPage = () => <h1>About Us</h1>
const OneMorePage = () => <h1>One More Page !</h1>
const PrimaryLayout = () => (
<div>
<nav className="navbar navbar-expand-md navbar-dark bg-dark">
<Link className="navbar-brand" to="/">App</Link>
<button type="button" className="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav mr-auto">
<li className="nav-item"><Link className="nav-link" to="/home">Home</Link></li>
<li className="nav-item"><Link className="nav-link" to="/about">About</Link></li>
<li className="nav-item"><Link className="nav-link" to="/one">More</Link></li>
</ul>
</div>
</nav>
<div className="container-fluid">
<Switch>
<Route path="/" exact component={AppPage} />
<Route path="/home" component={HomePage} />
<Route path="/about" component={AboutPage} />
<Route path="/one" component={OneMorePage} />
</Switch>
</div>
</div>
)
const App = () => (
<BrowserRouter>
<PrimaryLayout />
</BrowserRouter>
)
render(<App />, document.getElementById('root'))
我正在尝试构建一个 Boostrap 4 NavBar
,它将使用来自 react-router 的 ReactJS <Link>
组件,而不是原来的 <li>
class。
目前我在正确构建组件时遇到了问题,因为最后 ReactJS 组件没有达到预期的行为。
让我们从 original Boostrap 4 NavBar example:
开始<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
正在将其迁移到 ReactJS 组件,如下所示:
import React from 'react';
import Link from 'react-router-dom/Link';
function Menu() {
return (
<div>
<nav className="navbar navbar-toggleable-md navbar-light bg-faded">
<button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<a className="navbar-brand" href="#">Navbar</a>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<span className="nav-item active">
<Link className="nav-link" to="/">Home <span className="sr-only">(current)</span></Link>
</span>
<span className="nav-item">
<Link className="nav-link" to="/counter">Counter</Link>
</span>
<span className="nav-item">
<Link className="nav-link disabled" to="/about">About</Link>
</span>
</ul>
<form className="form-inline my-2 my-lg-0">
<input className="form-control mr-sm-2" type="text" placeholder="Search" />
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
);
}
export default Menu;
尽管它可以运行,但许多格式都丢失了,并且 "nav-link disabled" 等某些功能无法使用(您可以单击“关于”,它会转到所需的页面)。
我确定我做错了转换,因此在此感谢您帮助修复组件代码,以便在没有 React 的情况下正确反映原始行为。
问题是 Bootstrap
也有一个 Javascript
组件,它在 React
中不起作用,因为它与 React's
Javascript
冲突。 CSS
部分有效,这就是您所看到的。
您应该使用类似 React-Bootstrap
- https://react-bootstrap.github.io/ 的内容。这些都是写成 React
组件的所有 Bootstrap
组件,因此您可以通过在 JSX
.
React
方式使用它们
对于这个特定的用例,有一个简单的解决方案。
只需将此添加到您的 css:
.nav-link.disabled { pointer-events: none }
.
也就是说,我强烈建议长期使用基于 bootstrap 的 React 组件库。我个人喜欢https://reactstrap.github.io/.
也许你已经解决了。这是 Bootstrap 4:
的工作示例import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
const AppPage = () => <h1>React Router 4 & Bootstrap 4</h1>
const HomePage = () => <h1>Welcome Home !</h1>
const AboutPage = () => <h1>About Us</h1>
const OneMorePage = () => <h1>One More Page !</h1>
const PrimaryLayout = () => (
<div>
<nav className="navbar navbar-expand-md navbar-dark bg-dark">
<Link className="navbar-brand" to="/">App</Link>
<button type="button" className="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav mr-auto">
<li className="nav-item"><Link className="nav-link" to="/home">Home</Link></li>
<li className="nav-item"><Link className="nav-link" to="/about">About</Link></li>
<li className="nav-item"><Link className="nav-link" to="/one">More</Link></li>
</ul>
</div>
</nav>
<div className="container-fluid">
<Switch>
<Route path="/" exact component={AppPage} />
<Route path="/home" component={HomePage} />
<Route path="/about" component={AboutPage} />
<Route path="/one" component={OneMorePage} />
</Switch>
</div>
</div>
)
const App = () => (
<BrowserRouter>
<PrimaryLayout />
</BrowserRouter>
)
render(<App />, document.getElementById('root'))