未绑定组件之间的数据传输有何反应？

Question

页面的一部分

<Header/>
<Switch>
<Route path={/componentOneURL} component={ComponentOne} />
<Route path={/componentTwoURL} component={ComponentTwo} />
</Switch>
<Footer/>

这是apk的条件部分，此处为页眉页脚和切换到相应路径时加载的元素 有必要根据我们在Switch中切换到哪个元素来更改Header的状态，对于我自己，我得出了两种可能的解决方案：

1. 将标题隐藏在ComponentOne和ComponentTwo中，这不再是问题。
2. 通过Redux（我只教Redux，所以我自己不知道如何创建Redux，但是可以创建Redux）

这两个选项在我看来都是拐杖，所以也许有人会告诉我一些简单的选项，由于经验不足，我可能会错过它们

Answer 1

根据您的问题，您可以使用2个选项。

1. 如果只想更改标题中链接的活动类名称，则可以使用NavLink activeClassName：

<NavLink to={"/componentOneURL"} activeClassName="active" className="link">componentOne</NavLink>

1. 如果需要更一般的情况，请在两个子组件之间共享状态。您可以通过父级传递函数：

   setHeaderState=(value)=>{ this.setState({headerState:value}); }

   <Header headerState={this.state.headerState}/> <Switch> <Route path={'/componentOneURL'} render={() => <ComponentOne setHeaderState={this.setHeaderState}/>} /> <Route path={'/componentTwoURL'} render={() => <ComponentTwo setHeaderState={this.setHeaderState}/>} /> </Switch> <Footer/>