从另一个组件切换状态

Question

我对React和Redux很陌生，所以我可能完全以错误的方式做这件事，事实上从这里的类似问题的其他一些答案判断我怀疑我做错了很多。

我的'Layout'组件中有一个按钮，它为div添加了一个类，这个类来自一个状态。按钮是一个切换按钮，将转动状态＆amp;开启和关闭课程（这将导致菜单出现并使页面的其余部分变暗）。

然而，我还希望与'Nav'组件（它位于'Header'组件内部，然后生活在'Layout'中）进行任何交互，以切换状态＆amp; class（所以单击链接会折叠菜单）。在jQuery / VanillaJS中，这非常容易，但我似乎无法通过React / Redux的方式来实现这一点。

布局组件：https://pastebin.com/WzpbeSw7

标题组件：https://pastebin.com/c34NFtUx（可能不相关，但此处仅供参考）

导航组件：https://pastebin.com/EsJDuLQc

Answer 1

使用redux：

你可以拥有像toggleBlaBla这样的状态：＆＃34; show＆＃34; 。如果使用react-redux将react组件连接到redux状态，则每当您发送将toggleBlaBla更改为＆＃34; hide＆＃34;的操作时，您的连接组件将重新呈现。

仅使用反应：

如果您希望两个组件通过某些事件更改某些ui状态，最好将它们放在容器组件中，以便每当您的状态发生更改时，这两个组件都会重新呈现，并将更改后的状态传递给两个组件。

Answer 2

实现此目的的一种方法是执行以下操作：

在布局组件中：

• 第26行将<Header / >更改为：<Header handleNavClick={this.toggleNav.bind(this)} / >

在标题组件中：

• 第10行将<Navigation position="header" />更改为：<Navigation closeNav={this.props.handleNavClick.bind(this)} position="header" />

在导航组件中：

• 第16行将return <li key={item._id}><Link to={item.slug}>{item.name}</Link></li>更改为：return <li key={item._id}><Link to={item.slug} onClick={this.props.closeNav.bind(this)}>{item.name}</Link></li>

以这种方式传递道具将允许您引用Layout中的toggleNav函数，然后相应地更新状态。

***注意，您可能会收到绑定错误，例如React component methods may only be bound to the component instance.。

• 如果发生这种情况，您需要在导航组件上定义一个函数，而不是直接使用this.props.closeNav。您需要在导航中创建一个函数，如下所示：closeNav() { this.props.closeNav.bind(this) }。不要忘记将<Link />组件上的功能更新为this.closeNav.bind(this)