将数据传递给兄弟组件

Question

我想知道如何将道具传递给给定图像中的兄弟组件。 我无法用语言解释它，因为它似乎很难理解（至少对我来说）。

我有一个应用程序（类组件），其中包含给定的 state 变量。 我使用 state 生成一个 object ，其中包含诸如日历（日期、周、年）之类的信息。 按钮外观由此脚本生成。

时间表组件需要一些道具（基于按下哪个按钮），这些道具用于从 Firestore 数据库收集数据。

我知道 React 有一个单向的数据流，从上到下，这就是我想不通的原因。 如果可能的话，我不想使用 Redux。

Q1：如何告诉时间表组件按下了哪个按钮以及它包含什么日期？

Q2：在这些情况下，我真的需要使用 Redux 吗？

*编辑

这是我在上面发布的 draw.io 图表，如果它对任何人有帮助的话。

Answer 1

如果要在包含在公共父级中的兄弟组件之间交换道具，您可以将源组件 state 提升到公共父级的 state 然后将其传递给另一个（接收器）组件。

如果您需要源组件的 state 可全局访问（例如，分散在您的应用程序中的多个不相邻组件），您可能需要使用React Context或一些 state 管理工具，例如Z19D8912E22CC3312EB3531Z200 。

第一种方法的现场演示（最简单的）您可能会发现如下：

 const { useState } = React, { render } = ReactDOM, rootNode = document.getElementById('root') const Source = ({onButtonClick}) => ( <button onClick={onButtonClick}>Hit me</button> ) const Sink = ({status}) => ( <div>{status}</div> ) const Parent = () => { const [buttonStatus, setButtonStatus] = useState('off'), handleButtonHit = () => setButtonStatus(buttonStatus == 'off'? 'on': 'off') return ( <div> <Source onButtonClick={handleButtonHit} /> <Sink status={buttonStatus} /> </div> ) } render ( <Parent />, rootNode )

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>