如何从另一个组件打开抽屉答案

【问题标题】：How to open Drawer from another component如何从另一个组件打开抽屉
【发布时间】：2021-09-01 09:21:17
【问题描述】：

我的索引页面上有一个材质 UI Drawer，应该通过触发 onClick 打开它。我想从我的 Header 组件中打开它 - 可以吗？

我试图传递道具，但它不起作用。

这是我的 index.jsx

    const [cartOpen, setCartOpen] = useState(false);


<Header
                countCartItems={cartItems.length}
                cartItems={cartItems}
                onAdd={onAdd}
                onRemove={onRemove}
                setCartOpen={setCartOpen}
            />
            <Drawer
                anchor="top"
                open={cartOpen}
                onClose={() => setCartOpen(false)}
            >
                Hey, it's opened
            </Drawer>

还有我的 Header 组件，我正在尝试 setOpen(true)

const Header = (props, setCartOpen) = {
.......
 <button onClick={() => setCartOpen(true)}>
<Badge badgeContent={props.countCartItems}/>
 </button>
......

这通常是我将值/道具/状态从一个组件传递到另一个组件的方式，但在这种情况下，状态是布尔值，它不想触发它。有没有办法尽可能简单地处理它？

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

在功能组件中，props 作为唯一参数传递，它是一个对象。

您需要将代码更改为

选项 - 1：由于它们是对象，您可以进行 对象解构

const Header = ({setCartOpen, countCartItems, ... }) = {
.......
 <button onClick={() => setCartOpen(true)}>
<Badge badgeContent={countCartItems}/>
 </button>
......

选项 - 2：当您访问对象中的任何其他属性时，您可以通过 . 表示法访问它们

const Header = (props) = {
.......
 <button onClick={() => props.setCartOpen(true)}>
<Badge badgeContent={props.countCartItems}/>
 </button>
......

【讨论】：