javascript - 你将如何在 React 中的组件之间传输数据？

Question

我最近了解了一些有关 React 的知识，但我对如何在两个组件之间传输数据感到困惑。

目前，我实现了 2 个函数:

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

import Sidebar from './sidebar'

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

我还有 sidebar.tsx，其中包含边栏的实现。 (如果我正确理解 React 术语，这就是 child )。

import CloseButton from 'react-bootstrap/CloseButton';

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

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

谢谢!

Answer 1

您将您的状态提升到父组件，并传递事件处理函数。

例如:

// 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