将数据从较低的组件传递到较高的组件答案

【问题标题】：Pass data from lower to heigher component将数据从较低的组件传递到较高的组件
【发布时间】：2023-03-31 08:33:01
【问题描述】：

这是我的层次结构

  - AddEmployee component
  - UpdateComponent
  - Home
      * EmployeeItem component

the employee item component is just a line in a list 包含许多保存员工数据的列，在这些列中我有更新列，它是一个重定向到更新组件的图标，我如何将员工的数据传递给 UpdateEmployee component为了显示它们并启用修改它们，我不能使用反应路由器历史对象，因为在 EmployeeItem 组件中未定义，因为它不是路由并且反应路由器忽略它。有没有办法在不使用 readux 或其他状态管理器的情况下做到这一点，我在考虑 useContext 但我不清楚该怎么做。

我正在使用 react-router 来处理重定向

【问题讨论】：

这能回答你的问题吗？ How to pass data from child component to its parent in ReactJS?
不，不是从子到父，参见上面的层次结构。
我相信你的问题比你想的要简单。我建议你在 React 文档中阅读一些关于组件和道具的信息。 reactjs.org/docs/components-and-props.html无论如何我都会在这里留下一个快速的解决方案。

标签： reactjs pass-data

【解决方案1】：

要将数据从父级传递给子级，只需将其传递到组件本身的渲染中即可。这些被称为道具。

<EmployeeItem name = {Lyes} city = {Lisbon}/>

然后在你的组件内部

const EmployeeItem = props => {
   return (
     <h1>Employee {props.name} is from {props.city}</h1>
   );
}

【讨论】：