Question

我有一个下拉列表BasketContents组件（根据this question），当点击按钮时，该组件会淡入淡出。我还希望通过单击Link标记更改路线时关闭它。即如果它已在Checkout页面上打开，如果我点击Home页面链接，我希望它自动关闭而不点击购物篮的关闭按钮。

我的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的{{1}}状态，因此效果不佳。理想情况下，我希望在更改路线时（即点击open组件时）将open状态Basket.js设置为false。这可能吗？

Answer 1

我找到了一个不依赖context的解决方案。我在React文档之后做的第一件事就是从Basket组件到App组件的lift my basket state up。这使得从中心位置更容易操作它。

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

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

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

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

1 个答案: