Блог

Главная - Вопросы по программированию - Как открыть ящик из другого компонента

Как открыть ящик из другого компонента

#javascript #css #reactjs #material-ui

Вопрос:

У меня есть пользовательский интерфейс материала Drawer на моей странице индекса, который должен быть открыт при срабатывании onClick . Я хочу открыть его из своего компонента заголовка — возможно ли это?

Я попытался передать реквизит, но это не сработало.

Это мой индекс.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>

И мой компонент заголовка, где я пытаюсь setOpen(true) 

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

Обычно именно так я передаю значения/реквизиты/состояния от одного компонента к другому, но в этом случае, когда состояние является логическим, оно не хочет его запускать. Есть ли способ справиться с этим как можно проще?

Ответ №1:

В функциональных компонентах реквизиты передаются как единственный аргумент и его объект.

Вам нужно изменить свой код как

Вариант — 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>
......
Метки: