如何在更改React路由时隐藏子组件

Question

I have a dropdown BasketContents component (as per this question ), which fades in and out when a button is clicked. I also want it to close when a the route is changed by clicking a Link tag. Ie if it's already open on the Checkout page, if I then click the Home page link I want it to automatically close without clicking the basket's close button.

My Routes.js is the root of the app:

render() {
    return (
      <Router history={hashHistory}>
        <Route path="/" component={App}>
          <IndexRoute component={Home} />
          <Route path="/home" component={Home} />
          <Route path="/checkout" component={Checkout} />
        </Route>
      </Router>
    );
}

App.js looks in part like this:

render() {
    const childrenWithProps = React.Children.map(
        this.props.children,
        child => {
            return (
                React.cloneElement(child, {
                    basket: this.state.basket
                    }
                )
            )
        }
    );
    return (
        <div className="main">
            <HeaderSection basket={this.state.basket} />
            <div className="content">
                {childrenWithProps}
            </div>
        </div>
    )
}

The Basket.js component contains the button:

constructor() {
    super();
    this.state = { open: false }
    this.handleDropDown = this.handleDropDown.bind(this);
}
handleDropDown() {
    this.setState({ open: !this.state.open })
}
render() {
    return(
        <div className="basket">
        <button className="basketBtn" onClick={this.handleDropDown}>Toggle</button>
        <BasketContents 
          contents={this.props.contents} 
          open={this.state.open} 
        />
        </div>
    )
}

I did try adding onEnter to my routes but understandably that doesn't do much since it doesn't have access to the Basket 's open state. I would ideally like to set the open state of Basket.js to false when changing route (ie when clicking on a Link component). Is this possible?

Answer 1

I found a solution that doesn't rely on context . The first thing I did, following the React docs, was to lift my basket state up from the Basket component to the App component. This made it easier to manipulate it from a central location.

Then, following a suggestion here , I listened for changes to the browserHistory in the componentWillMount hook in App :

componentWillMount() {
    browserHistory.listen( () =>  {
        this.setState({ basketOpen: false });
    });
}

The result is that when the page changes the basket closes.