React中的条件导航渲染

时间:2019-04-21 09:51:07

标签: javascript reactjs react-router jsx

我正在使用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>

我尝试使用statesprops,但是没有运气。我该如何解决这个问题?

谢谢。

2 个答案:

答案 0 :(得分:2)

您可以使用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;

答案 1 :(得分:0)

您可以使用SELECT p.forename p.surname, p.condition FROM patient p WHERE p.WardID = (SELECT WardID FROM ward w WHERE p.WardID = w.WardID AND w.name = 'Victoria'); 并将其与首页的路线进行匹配,以有条件地传递道具。

最好在window.location.pathname的{​​{1}}中定义要传递的道具对象:

componentDidMount

然后传播它。

App.js