在React中如何在组件之间传输数据?

Question

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

目前，我有两个函数实现如下:

我有topbar。TSX，它显示了顶部栏的信息，比如显示一些打开侧边栏的按钮(这是我的下一个功能)。

import Sidebar from './sidebar'
export default topbar(props) {
return (
<Drawer
open={isOpen}
onclose={anotherfunction}>
<Sidebar />
</Drawer>
)
}

我还有侧边栏。其中包含了工具条的TSX实现。(如果我对反应术语理解正确的话，这就是孩子)。

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

游乐场

Answer 2

首先，将topbar重命名为topbar。否则你无法渲染你的组件。

对于你的问题，你也可以直接将props传递给Sidebar组件。

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