问题描述
我是 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;
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)