将数据传递到同级组件

Question

我想知道如何将道具传递到给定图像中的同级组件中。我无法用语言解释它，因为它似乎太难理解了（至少对我而言）。

我有一个App（Class组件），其中包含给定的状态变量。我使用状态来生成一个对象，其中包含诸如日历（日期，星期，年）之类的信息。按钮外观是由此脚本生成的。

时间表组件包含一些道具（基于按下的按钮），这些道具用于从Firestore数据库收集数据。

我知道React从顶部到底部都有一个单向数据流，这就是为什么我无法弄清楚这一点的原因。如果可能的话，我不想使用Redux。

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

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

*编辑

Here is the draw.io chart I posted above if it helps anyone.

Answer 1

如果您想在包装在公共父级中的同级组件之间交换道具，则可以lift将源组件状态提升到公共父级的状态，然后将其传递给另一个（接收器）组件。

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

第一种方法的实时演示（非常简单），您可能会发现如下：

This is a sample text document which consists of all demographic information of employee here is the value you may need, @@name: George  @@employee_id:14296 @@blood_group:b positive this is the blood group of the employee @@age:32

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
)