[英]Conditional Navigation Rendering in React
我正在使用React v16.7和MDB(用於Bootstrap的材料設計)構建一個簡單的react應用。 react-router-dom
處理我的路由系統。 我希望導航欄在主頁中透明,而在其他頁面中我希望其黑暗。 我的代碼如下:
App.js
class App extends Component {
state = {
collapseID: ""
}
toggleCollapse = collapseID => () =>
this.setState(prevState => ({
collapseID: prevState.collapseID !== collapseID ? collapseID : ""
}));
closeCollapse = collapseID => () =>
this.state.collapseID === collapseID && this.setState({ collapseID: "" });
render() {
const overlay = (
<div
id="sidenav-overlay"
style={{ backgroundColor: "transparent" }}
onClick={this.toggleCollapse("mainNavbarCollapse")}
/>
);
const { collapseID } = this.state;
return (
<Router>
<div className="flyout">
<MDBNavbar color="elegant-color-dark" dark expand="md" fixed="top" scrolling transparent>
<MDBContainer>
<MDBNavbarBrand href="/">
<img src={Logo} height="50" alt="Logo" />
</MDBNavbarBrand>
<MDBNavbarToggler onClick={this.toggleCollapse("mainNavbarCollapse")} />
<MDBCollapse id="mainNavbarCollapse" isOpen={this.state.collapseID} navbar>
<MDBNavbarNav right>
<MDBNavItem>
<MDBNavLink exact to="/" onClick={this.closeCollapse("mainNavbarCollapse")} >
Home
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink onClick={this.closeCollapse("mainNavbarCollapse")} to="/about" >
About
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink onClick={this.closeCollapse("mainNavbarCollapse")} to="/products">
Products
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink onClick={this.closeCollapse("mainNavbarCollapse")} to="/trading">
Trading
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink onClick={this.closeCollapse("mainNavbarCollapse")} to="/contact">
Contact
</MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>
{collapseID && overlay}
<main style={{ marginTop: "0" }}>
<Routes />
</main>
</div>
</Router>
);
}
}
export default App;
Routes.js
class Routes extends React.Component {
render() {
return (
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/products" component={Products} />
<Route exact path="/trading" component={Trading} />
<Route exact path="/contact" component={Contact} />
<Route
render = {function () {
return <h1 className="text-center m-5">Page Not Found</h1>;
}}
/>
</Switch>
);
}
}
export default Routes;
如您所見,在App.js
, <MDBNavbar color="elegant-color-dark" dark expand="md" fixed="top" scrolling transparent>
具有transparent
屬性。 我只想要在首頁上。 在其他頁面中,它類似於: <MDBNavbar color="elegant-color-dark" dark expand="md" fixed="top" scrolling>
。
我嘗試使用states
和props
但沒有運氣。 我該如何解決這個問題?
提前致謝。
您可以從react-router( https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md )中使用withRouter
HOC來獲取NavBar中道具中的location
,提取為單獨的成分。 它會或多或少地給出該結果(減去NavBar缺少的道具):
const NavBar = ({location, collapseID, closeCollapse, toggleCollapse}) => <MDBNavbar color={location.pathname === "home"? "elegant-color-dark": ""} dark expand="md" fixed="top" scrolling transparent>
<MDBContainer>
<MDBNavbarBrand href="/">
<img src={Logo} height="50" alt="Logo" />
</MDBNavbarBrand>
<MDBNavbarToggler onClick={toggleCollapse("mainNavbarCollapse")} />
<MDBCollapse id="mainNavbarCollapse" isOpen={collapseID} navbar>
<MDBNavbarNav right>
<MDBNavItem>
<MDBNavLink exact to="/" onClick={closeCollapse("mainNavbarCollapse")} >
Home
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink onClick={closeCollapse("mainNavbarCollapse")} to="/about" >
About
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink onClick={closeCollapse("mainNavbarCollapse")} to="/products">
Products
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink onClick={closeCollapse("mainNavbarCollapse")} to="/trading">
Trading
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink onClick={closeCollapse("mainNavbarCollapse")} to="/contact">
Contact
</MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>
const NavBarWithRouter = withRouter(NavBar)
class App extends Component {
state = {
collapseID: ""
}
toggleCollapse = collapseID => () =>
this.setState(prevState => ({
collapseID: prevState.collapseID !== collapseID ? collapseID : ""
}));
closeCollapse = collapseID => () =>
this.state.collapseID === collapseID && this.setState({ collapseID: "" });
render() {
const overlay = (
<div
id="sidenav-overlay"
style={{ backgroundColor: "transparent" }}
onClick={this.toggleCollapse("mainNavbarCollapse")}
/>
);
const { collapseID } = this.state;
return (
<Router>
<div className="flyout">
<NavBarWithRouter toggleCollapse={this. toggleCollapse} closeCollapse={this.closeCollapse} collapseID={collapseID} />
{collapseID && overlay}
<main style={{ marginTop: "0" }}>
<Routes />
</main>
</div>
</Router>
);
}
}
export default App;
您可以使用window.location.pathname
並將其與首頁的路線進行匹配,以有條件地傳遞道具。
最好在App.js
componentDidMount
中定義要傳遞的props對象:
let homePageProps = {};
if (window.location.pathname === "/") {
homePageProps.transparent = "transparent";
}
然后傳播它。
<MDBNavbar color="elegant-color-dark" dark expand="md" fixed="top" scrolling {...homePageProps}>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.