时间戳

首页 > 解决方案 > React-Typescript 将动态值传递给兄弟姐妹？

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

问题描述

嗨，编码和 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> 
)

我所期待的快速示例：

组件1：

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

组件2：

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

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

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

标签： reactjstypescriptdynamic

解决方案

如果 COMPONENT2 是 COMPONENT1 的子组件：

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

如果 COMPONENT1 和 COMPONENT2 是兄弟姐妹：

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

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

推荐阅读