javascript - react.js 在按钮单击时触发另一个组件内的事件
问题描述
我正在用 React 构建我的第一个 Web 应用程序。它与多个聊天室聊天。这是我在视觉上得到的:
现在我只想在任何房间上单击“打开”,然后在右侧的白色 div 内显示该聊天室中的消息,当前显示“HI MOM”。
但这两个是不同的组件。
这是聊天室列表:
export default function ChatRoomList({param1}) {
const [chatRooms, setChatRooms] = React.useState([]);
React.useEffect(()=>{
(async () => {
var x = await getChatRoom(param1)
console.log(x)
setChatRooms(x)
})()
},[])
return (
<div className='chatRoomView'>
{chatRooms.map((chatRoom , index) => {
return (
<ul >
<li key={index}>
<table>
<tr>
<td>
ChatroomID: {chatRoom.chatIDFromTableChats}
<br></br>
Username: {chatRoom.userNameUser2}
</td>
<td>
<Button variant="contained" onClick={() => loadChatRoomFromID(chatRoom.chatIDFromTableChats)}>open</Button>
</td>
</tr>
</table>
</li>
</ul>
)
})}
</div>
);
}
function loadChatRoomFromID(ID) {
alert(`chatRoomID: ${ID}`);
}
单击按钮后,我目前只能打开一个显示单击元素 ID 的警报。
这是组件二:
export default function ChatMessages() {
function loadMessages(ID){
// HELP NEEDED?!
}
return <div class='mainChatView'>HI MOM</div>;
}
如您所见,有一个名为“loadMessages()”的函数,但它没有做任何事情,因为它需要传递 ID 参数,然后开始加载每个房间的消息。
从一个组件到另一个组件的连接丢失了,到目前为止,我读到的没有答案对我来说并没有惨败……
有人可以给我一个工作代码示例并解释发生了什么吗?
谢谢!
解决方案
在 React 中,数据只能通过 props 从父级传递给子级(有关详细信息,请参阅末尾的注释),而不是从兄弟姐妹传递给兄弟姐妹。然而,这并不意味着兄弟姐妹不能导致彼此更新,它只是意味着您需要稍微重构代码,以便数据正确地向下流动。
您可以将活动聊天室 ID 存储在列表和详细视图的父级中,并让列表视图更新 ID,而详细视图使用 ID 加载消息。
这是一个简单的例子:
function Chat() {
const [activeRoomID, setActiveRoomID] = React.useState(null);
const onActiveChange = React.useCallback((id) => {
setActiveRoomID(id);
}, []);
return (
<div>
<ChatRoomList onActiveChange={onActiveChange}/>
<ChatMessages id={activeRoomID}/>
</div>
)
}
function ChatRoomList({ onActiveChange }) {
// ...
return (
<div>
{chatRooms.map(chatRoom => (
<div key={chatRoom.chatIDFromTableChats}>
<div>ChatroomID: {chatRoom.chatIDFromTableChats}</div>
<Button onClick={() => onActiveChange(chatRoom.chatIDFromTableChats)}>Open</Button>
</div>
))}
</div>
)
}
function ChatMessages({ id }) {
// load messages for `id` and display
}
请注意,数据仅从<Chat>
组件向下流向其子级。
关于仅从父级流向子级的数据的注意事项:此语句还有其他复杂性。正如这个例子所示,孩子也可以将数据传递给他们的父母,但只能使用通过 props 提供的回调函数,因此 React 特定的部分仍然只允许数据向下流动。上下文 API 还允许将数据传递给深层后代(不仅仅是子代)。
推荐阅读
- python-3.x - 如何在非 Sequential() Keras 模型的层中设置权重和梯度权重
- r - 如何在 1 个图中绘制多个数据集的概率密度函数图?
- three.js - A-Frame:0.9.0 和 0.9.2 版本之间的“透视截图”功能中断?
- docker - 无法使用手动 iptables 在 Dockerfile 中运行 apt-get update
- javascript - JQuery - 单击切换按钮时,附加表会不断增加自身或复制自身
- powershell - 处理目录存在异常
- c++ - 增强器使用先前的 DMatrix 后 XGDMatrixCreateFromMat 失败
- python-3.x - 通过 Python 从 Selenium 使用 WebDriverWait 时不打印异常消息
- swift - 找不到架构“arm64”的模块“TLSphinx”;发现:i386
- javascript - 什么是 HTMLDocument 函数?