React-Typescript 将动态值传递给兄弟姐妹？

Question

您好，对编码和 React 很陌生（大约 3 周），所以如果我以一种奇怪的方式问这个问题，请告诉我，我会尽力澄清。

我正在研究这两个组件，我想将从 COMPONENT1 动态生成的数据传递给 COMPONENT2（参见下面的代码）。

在 COMPONENT1 中，我使用地图来动态显示按钮数组。然后使用 JSX 根据定义的对象数组的数据动态添加文本。这很好用，但我想做的是获取一些动态呈现的数据并将其传递给 COMPONENT2，即每个按钮都可以将特定数据向下发送到 COMPONENT2。

特别是，我希望能够根据我按下的按钮动态地将 obj.text 发送到 COMPONENT2。

组件 1

export default function Button(props){
 const arrObj = [
   { id: '0', var: 'varString1', text: 'textString1'},
   { id: '1', var: 'varString2', text: 'textString2'}
 ]

 return (
  <div>
   {arrObj.map( (item) =>
    <div key={obj.id}>
     <Icon> {`${obj.var}`}<span> {`${obj.text`}</span></Icon>
     <Button>{'add something'}</Button>
    </div>
}

组件 2

 const Style = (props) => {
  return(
   <div>
     <h1>{`Please ${props.ojb.text}`}</h1>
     <Button> {`Please ${props.ojb.text}`} </Button> 
  </div> 
)

我所期待的快速示例：

COMPONET1：

 <Icon>{refresh}<span> Refresh the page </span>
 <Button onClick=(send "Refresh the page to COMPONENT2")></Button>

COMPONET2：

 <h1> Please Refresh the Page </h1>
 <Button> Please Refresh the Page </Button>

注意：如果有帮助，我将使用 Material-UI 来设置这些组件的样式。

再次请让我知道是否有任何令人困惑的地方，以及是否有什么我可以做的澄清。此外，在状态管理方面，我宁愿不使用 redux，但我愿意就这方面的任何内容提供反馈。

Answer 1

如果 COMPONENT2 是 COMPONENT1 的子组件：

将点击的按钮值obj.text保存到COMPONENT1的状态 并将其传递给 COMPONENT2，您可以添加一个函数来更改该状态 按钮的onClick 事件上的对象。

如果 COMPONENT1 和 COMPONENT2 是兄弟姐妹：

1. 在其父组件中创建一个函数，使用 props 从 COMPONENT1 获取值并将其从父组件传递给 COMPONENT2。
2. 使用上下文 API 或存储。 （如果您的场景很简单，那将是矫枉过正）

最重要的是欢迎使用 React 和快乐编码！ :)