我最近学习了一些关于react的知识,我对如何在两个组件之间传输数据感到困惑.

目前,我实现了两个功能:

我有topbar.tsx显示顶栏信息,例如显示一些按钮以打开侧栏(这是我的下一个功能).

import Sidebar from './sidebar'

export default topbar(props) {
   return (
       <Drawer
           open={isOpen}
           onclose={anotherfunction}>
           <Sidebar />
       </Drawer>
   )
}

我也有侧边栏.其中包含tsx边栏的实现.(如果我正确理解react术语,这就是子元素).

import CloseButton from 'react-bootstrap/CloseButton';

export default Sidebar() {
    return (
        <CloseButton />
    )
}

我面临的问题是,由于topbar是控制侧栏打开和关闭的功能,但是,我希望侧栏上出现一个关闭按钮,并完全按照所说的操作.我如何能够在这两个文件之间传输状态信息,以便打开侧栏并使用侧栏中的按钮将其关闭.

非常感谢.

推荐答案

将状态提升到父组件,并传递事件处理程序函数.

例如:

// Holds state about the drawer, and passes functions to mamange that state as props.
function Topbar() {
    const [isOpen, setIsOpen] = useState(false)
    return (
        <Drawer isOpen={isOpen}>
            <Sidebar onClose={() => setIsOpen(false)} />
        </Drawer>
   )
}

// Drawer will show it's children if open.
function Drawer({ isOpen, children }: { isOpen: boolean, children: React.ReactNode }) {
    if (!isOpen) return null
    return <div>{children}</div>
}

// Sidebar will send onClose to the button's onClick
function Sidebar({onClose}: { onClose: () => void }) {
    return (
        <CloseButton onClick={onClose} />
    )
}

// Close button doesn't care what happens on click, it just reports the click
function CloseButton({onClick}: { onClick: () => void }) {
    return <div onClick={onClick} />
}

Playground

Javascript相关问答推荐

react 批处理如何工作?

声明或分配类型的最佳实践

try 在 JSS 中使用具有类似函数格式的 CSS 语句,但出现错误

如何从对象列表中获取唯一值?

javascript map 函数返回未定义

在 forEach() 循环中更改数组内的值

分析 Marklogic 搜索请求

React Native,如何通过按下按钮将多个TextInputs中的值获取到一个对象中?

根据菜单的 Select 显示背景 colored颜色 link

knex.js 上的“DELETE FROM 位置 ORDER BY id DESC LIMIT”1 不起作用

为什么我的 kick 命令只给出错误?

判断鼠标是否在具有三个 x,y 坐标的三角形中

当我try 打印出星星层时,为什么在 JavaScript 的 for 循环末尾出现未定义?

从 localStorage 对象变量中删除对象键而不从 localStorage 中删除

gatsby :getImage 返回未定义

在javascript中转义双引号

具有 6 个键的对象数组,如何将它们分组为更少的键?

nextjs - 将图像作为props 传递给 next/image

如何将通常位于数据库中的数据保存到 SharePoint 文件夹或网站的根文件夹

异步请求后如何重定向路由?