如果 <notFound/> 组件被执行，将 class 添加到 <footer/>component 。 React-Redux

Question

如果 < notFound /> 路由被执行（即：如果没有找到页面被渲染我想添加 class 到页脚组件。

下面是我的index.jsx渲染函数

    render() {
    return (
        <div>
            <Navbar />
            <div className="pageData">
                {this.props.children}
                // <notFound/> component will get rendered here
            </div>
            <Footer/>
            <LoginPopup />
        </div>
    )
}

下面是我的routes.jsx

 import React from 'react'
import { Route, IndexRoute } from 'react-router'
import App from 'layout/app'
import Home from 'pages/home'
import MyWagers from 'containers/myWagersContainer'
import Wagers from 'containers/wagersContainer'
import NotFound from 'pages/notFound'

const ROUTES = (
<Route path='/' component={App}>
    <IndexRoute component={Home} />
    <Route path="/wagers(/:trackCode)(/:raceNum)" component={Wagers} >
        <Route path="*" component={() => (<NotFound status = "404" />)}/>
    </Route>
    <Route path="/mywagers" component={MyWagers} />
    <Route path="*" name = "notFound" component={() => (<NotFound status =  "404" />)}/>
</Route> ) 
export default ROUTES

那么我们可以全局设置一些东西或者我们可以获取路由名称以便我们可以根据渲染组件在页脚组件中添加 class

Answer 1

使用您传递给 this.props.children 然后在 <NotFound />

中的回调

componentWillMount() {
  this.props.setFooterClass('myclass');
}

componentWillUnmount() {
  this.props.setFooterClass('');
}

在index.js中：

 <NotFound setFooterClass={myClass => this.setState({ footerClass: myClass })} />

和

 <Footer className={this.state.footerClass} />

如果 <notFound/> 组件被执行，将 class 添加到 <footer/>component 。 React-Redux

If <notFound/> component get executed add class to <footer/>component . React-Redux

reactjs

react-redux

react-router-redux