Часть 4. Создание пользовательской кнопки для управления открытием и закрытием меню
В этой статье мы собираемся создать собственную кнопку для управления открытием и закрытием меню.
Во-первых, нам нужно добавить React Recoil.
yarn add recoil
В _app.js импортируйте RecoilRoot из Recoil, затем используйте компонент ‹RecoilRoot›, чтобы обернуть ‹Component›.
import { RecoilRoot } from 'recoil'
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return (
<RecoilRoot>
<Component {...pageProps} />
</RecoilRoot>)
}
export default MyApp
Создать MenuAtom.js
Создайте menuAtom.js в «папке атомов».
import { atom } from "recoil";
export const openState = atom({
key: 'openState', // unique ID (with respect to other atoms/selectors)
default: false, // truedefault value (aka initial value)
});
Внутри MyDropdown.js импортируйте useRecoilState и openState.
import { useRecoilState } from 'recoil'
import { openState } from '../atoms/menuAtom'
export default function MyDropdown() {
const items = [{ name: "account", disabled: false }, { name: "info", disabled: false }, { name: "signout", disabled: true }, { name: "register", disabled: false }]
const [isOpen, setIsOpen] = useRecoilState(openState)
return (
...
Затем зайдите внутрь index.js.
import { useRecoilState } from 'recoil'
import { openState } from '../atoms/menuAtom'
import MyDropdown from '../components/MyDropdown'
export default function Home() {
const [isOpen, setIsOpen] = useRecoilState(openState)
return (
<div className="bg-blue-100 h-screen">
<button onClick={()=>setIsOpen(!isOpen)}>custom button</button>
<MyDropdown/>
</div>
)
}
Если вам понравилась эта история, вам также может понравиться подписка на Medium. Это всего 5 долларов в месяц (цена чашки кофе!), но это даст вам неограниченный доступ к историям, поддерживая ваших любимых писателей. Если вы зарегистрируетесь по этой ссылке, я получу небольшую комиссию. Спасибо!
Подписывайтесь на нас: YouTube, Medium, Udemy, Linkedin, Twitter, Instagram, Gumroad, Quora, Telegram.
Присоединяйтесь к партнерам, чтобы зарабатывать деньги
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
