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

Question

我有一个下拉 BasketContents 组件（根据），单击按钮时它会淡入和淡出。我还希望它在通过单击 Link 标记更改路线时关闭。 IE。如果它已经在 Checkout 页面上打开，如果我随后单击 Home 页面 link 我希望它在不单击购物篮的关闭按钮的情况下自动关闭。

我的 Routes.js 是应用程序的根目录：

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 部分看起来像这样：

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>
    )
}

Basket.js 组件包含按钮：

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>
    )
}

我确实尝试将 onEnter 添加到我的路由中，但可以理解这并没有太大作用，因为它无法访问 Basket 的 open 状态。理想情况下，我希望在更改路线时（即单击 Link 组件时）将 Basket.js 的 open 状态设置为 false。这可能吗？

Answer 1

我找到了一个不依赖于 context 的解决方案。根据 React 文档，我做的第一件事是 lift my basket state up 从 Basket 组件到 App 组件。这使得从中央位置对其进行操作变得更加容易。

然后，根据建议 here，我听取了 App 中 componentWillMount 挂钩中 browserHistory 的更改：

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

结果是当页面更改时篮子关闭。

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

How to hide a child component when changing React route

javascript

state

reactjs

react-router