HeadlessUI: Раскрытие информации

Часть 3. Закрытие раскрытий вручную

В этой части мы собираемся создать пользовательский компонент в качестве кнопки раскрытия информации.

Сначала в папке компонентов создайте MyLink.js.

import React from 'react'
const MyLink = React.forwardRef(({ onClick, href }, ref) => {
return (
<a href={href} onClick={onClick} ref={ref}> MyLink</a>
)
})
export default MyLink

Затем под панелью Disclosure.Panel добавьте кнопку Disclosure.Button и отобразите ее как ‹MyLink›, href= "/home"

<Disclosure.Panel className="px-4 pt-4 pb-2 text-sm text-gray-500">
Yes! You can purchase a license that you can share with your entire
team.
<Disclosure.Button as={MyLink} href="/home">
Home
</Disclosure.Button>
</Disclosure.Panel>

В папке pages создайте home.js

import React from 'react'
const home = () => {
return (
<div>home</div>
)
}
export default home

Поэтому, когда пользователь нажимает кнопку MyLink. Он закроет раскрытие и перейдет на домашнюю страницу.

React.forwardRef ссылка

Из официальной документации: if-the-child-is-a-function-component показывает правильный путь, когда вы заключаете пользовательский компонент функции в Link.

1. Добавьте атрибут passHref в Link.
2. Оберните свой компонент пользовательской функции с помощью React.forwardRef.

Однако NavbarBrand не является компонентом, которым вы можете манипулировать. Вы можете создать собственный компонент для обертывания NavbarBrand. Это, наверное, нравится

const CustomNavbarBrand = React.forwardRef(({ onClick, href }, ref) => {
  return (
    <NavbarBrand href={href} onClick={onClick} ref={ref}>
      Click Me
    </NavbarBrand>
  )
})

<Link href="/">
  <CustomNavbarBrand>{APP_NAME}</CustomNavbarBrand>
</Link>

Если вам понравилась эта история, вам также может понравиться подписка на Medium. Это всего 5 долларов в месяц (цена чашки кофе!), но это даст вам неограниченный доступ к историям, поддерживая ваших любимых писателей. Если вы зарегистрируетесь по этой ссылке, я получу небольшую комиссию. Спасибо!

Подписывайтесь на нас: YouTube, Medium, Udemy, Linkedin, Twitter, Instagram, Gumroad, Quora, Telegram.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.