侧边栏和主要上下文组件之间的反应通信

如何解决侧边栏和主要上下文组件之间的反应通信

我是 React 的新手，我正在尝试了解组件之间的通信是如何工作的。我已经阅读/观看了很多文章和视频，但它们都是关于父子的。我正在创建一个包含三个组件的 React 应用程序。一个侧边栏有一个数据列表（在这种情况下，我使用了来自虚假 API 的用户），我还有其他两个组件，TOP 和 BottOM。我想要实现的是，每当我单击侧边栏上的用户时，我想查看 TOP 组件中的详细信息，当我单击 TOP 组件上的地址链接时，我想查看 BottOM 组件中的地址详细信息。这是关于我正在尝试构建的共享链接

https://codesandbox.io/s/serene-jackson-irvs4?file=/src/Left.jsx

你能向我解释最好的方法吗？

谢谢

这是 App.js 代码

import React from "react";
import "./styles.css";
import Left from "./Left";
import Top from "./Top";
import Bottom from "./Bottom";

export default function App() {
  return (
    <div className="wrapper">
      <div className="left">
        <Left />
      </div>
      <div className="up">
        <Top />
      </div>
      <div className="down">
        <Bottom />
      </div>
    </div>
  );
}

这是左组件

import React,{ useState,useEffect } from "react";
import axios from "axios";

const Left = () => {
  const [users,setUsers] = useState(null);
  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/users").then((res) => {
      const userlist = res.data;
      setUsers(userlist);
    });
  },[]);

  return (
    <div>
      {users && users.map((user) => <h3 key={user.id}> {user.name}</h3>)}
    </div>
  );
};

export default Left;

现在每当我点击左侧组件上的用户名时，我都想用用户的详细信息更新 TOP 组件

这是顶部组件

import React from "react";

const Top = () => {
  return <h1>Top</h1>;
};

export default Top;