将高山组件转换为React
将高山组件转换为React
提问于 2021-01-01 14:18:44
我正在尝试在React (使用自定义头像选择，这是第一个)→https://tailwindui.com/components/application-ui/forms/select-menus中转换一个高山组件
要复制阿尔卑斯源，你可以打开源标签并从那里复制元素，或者我将它粘贴到下面(只保留3个li元素，这是重复的代码)：
<div class="w-full max-w-xs mx-auto">
<!--
Custom select controls like this require a considerable amount of JS to implement from scratch. We're planning
to build some low-level libraries to make this easier with popular frameworks like React, Vue, and even Alpine.js
in the near future, but in the mean time we recommend these reference guides when building your implementation:
https://www.w3.org/TR/wai-aria-practices/#Listbox
https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
-->
<div
x-data="Components.customSelect({ open: true, value: 3, selected: 3 })"
x-init="init()"
>
<label id="listbox-label" class="block text-sm font-medium text-gray-700">
Assigned to
</label>
<div class="mt-1 relative">
<button
type="button"
x-ref="button"
@keydown.arrow-up.stop.prevent="onButtonClick()"
@keydown.arrow-down.stop.prevent="onButtonClick()"
@click="onButtonClick()"
aria-haspopup="listbox"
:aria-expanded="open"
aria-expanded="true"
aria-labelledby="listbox-label"
class="relative w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
>
<span class="flex items-center">
<img
:src='["https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80","https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1568409938619-12e139227838?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1584486520270-19eca1efcce5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1561505457-3bcad021f8ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"][value]'
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
class="flex-shrink-0 h-6 w-6 rounded-full"
/>
<span
x-text='["Wade Cooper","Arlene Mccoy","Devon Webb"][value]'
class="ml-3 block truncate"
>Tom Cook</span
>
</span>
<span
class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
>
<svg
class="h-5 w-5 text-gray-400"
x-description="Heroicon name: selector"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</span>
</button>
<div
x-show="open"
@click.away="open = false"
x-description="Select popover, show/hide based on select state."
x-transition:leave="transition ease-in duration-100"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="absolute mt-1 w-full rounded-md bg-white shadow-lg"
>
<ul
@keydown.enter.stop.prevent="onOptionSelect()"
@keydown.space.stop.prevent="onOptionSelect()"
@keydown.escape="onEscape()"
@keydown.arrow-up.prevent="onArrowUp()"
@keydown.arrow-down.prevent="onArrowDown()"
x-ref="listbox"
tabindex="-1"
role="listbox"
aria-labelledby="listbox-label"
:aria-activedescendant="activeDescendant"
class="max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
x-max="1"
aria-activedescendant=""
>
<li
x-description="Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
id="listbox-item-0"
role="option"
@click="choose(0)"
@mouseenter="selected = 0"
@mouseleave="selected = null"
:class="{ 'text-white bg-indigo-600': selected === 0, 'text-gray-900': !(selected === 0) }"
class="cursor-default select-none relative py-2 pl-3 pr-9 text-gray-900"
>
<div class="flex items-center">
<img
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
class="flex-shrink-0 h-6 w-6 rounded-full"
/>
<span
x-state:on="Selected"
x-state:off="Not Selected"
:class="{ 'font-semibold': value === 0, 'font-normal': !(value === 0) }"
class="ml-3 block font-normal truncate"
>
Wade Cooper
</span>
</div>
<span
x-description="Checkmark, only display for selected option."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
x-show="value === 0"
:class="{ 'text-white': selected === 0, 'text-indigo-600': !(selected === 0) }"
class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600"
style="display: none"
>
<svg
class="h-5 w-5"
x-description="Heroicon name: check"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</span>
</li>
<li
x-description="Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
id="listbox-item-1"
role="option"
@click="choose(1)"
@mouseenter="selected = 1"
@mouseleave="selected = null"
:class="{ 'text-white bg-indigo-600': selected === 1, 'text-gray-900': !(selected === 1) }"
class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9"
>
<div class="flex items-center">
<img
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
class="flex-shrink-0 h-6 w-6 rounded-full"
/>
<span
x-state:on="Selected"
x-state:off="Not Selected"
:class="{ 'font-semibold': value === 1, 'font-normal': !(value === 1) }"
class="ml-3 block font-normal truncate"
>
Arlene Mccoy
</span>
</div>
<span
x-description="Checkmark, only display for selected option."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
x-show="value === 1"
:class="{ 'text-white': selected === 1, 'text-indigo-600': !(selected === 1) }"
class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600"
style="display: none"
>
<svg
class="h-5 w-5"
x-description="Heroicon name: check"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</span>
</li>
<li
x-description="Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
id="listbox-item-2"
role="option"
@click="choose(2)"
@mouseenter="selected = 2"
@mouseleave="selected = null"
:class="{ 'text-white bg-indigo-600': selected === 2, 'text-gray-900': !(selected === 2) }"
class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9"
>
<div class="flex items-center">
<img
src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
alt=""
class="flex-shrink-0 h-6 w-6 rounded-full"
/>
<span
x-state:on="Selected"
x-state:off="Not Selected"
:class="{ 'font-semibold': value === 2, 'font-normal': !(value === 2) }"
class="ml-3 block font-normal truncate"
>
Devon Webb
</span>
</div>
<span
x-description="Checkmark, only display for selected option."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
x-show="value === 2"
:class="{ 'text-white': selected === 2, 'text-indigo-600': !(selected === 2) }"
class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600"
style="display: none"
>
<svg
class="h-5 w-5"
x-description="Heroicon name: check"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</span>
</li>
<!-- More options... -->
</ul>
</div>
</div>
</div>
</div>我理解大部分内容，但是我不理解@click=choose(0) &还有x-state:on="Selected" x-state:off="Not Selected"，比如在哪里使用了Selected & Not Selected。
我只想把这个组件转换成React，但有些事情我不明白。将非常感谢您的帮助:)
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-01 15:50:12
我使用了@headlessui/react的Listbox组件来实现the same result
SelectWithAvatar.tsx
import * as React from 'react'
import { Listbox, Transition } from '@headlessui/react'
import clsx from 'clsx'
import { Selector, Check } from '@/components/icons/index'
type Option = {
id: string
name: string
img: string
}
interface IProps {
label?: string
value: Option
onChange: (name: string) => void
options: Array<Option>
}
export const SelectWithAvatar = ({ label, options, value, onChange }: IProps) => {
return (
<Listbox
value={value}
onChange={(value: Option) => {
onChange(value.name)
}}
>
{({ open }) => (
<>
<Listbox.Label className="mb-1 text-sm font-medium text-blue-gray-500">
{label}
</Listbox.Label>
<div className="relative mt-1">
<Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-white border border-gray-300 rounded-md shadow-sm cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<span className="flex items-center">
<img
src={value.img}
alt={value.name}
className="flex-shrink-0 w-6 h-6 rounded-full"
/>
<span className="block ml-3 truncate">{value.name}</span>
</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 ml-3 pointer-events-none">
<Selector />
</span>
</Listbox.Button>
<div className="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg">
<Transition
show={open}
leave="transition duration-100 ease-in"
leaveFrom="transform opacity-100"
leaveTo="transform opacity-0"
>
<Listbox.Options
static
className="py-1 overflow-auto text-base rounded-md max-h-56 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
>
{options.map((option) => {
return (
<Listbox.Option as={React.Fragment} key={option.id} value={option}>
{({ active, selected }) => {
return (
<li
className={clsx(
'relative py-2 pl-3 cursor-default select-none pr-9',
{
'text-white bg-indigo-600': active,
'text-gray-900': !active,
}
)}
>
<div className="flex items-center">
<img
src={option.img}
alt={option.name}
className="flex-shrink-0 w-6 h-6 rounded-full"
/>
<span
className={clsx('ml-3 block truncate', {
'font-semibold': selected,
'font-normal': !selected,
})}
>
{option.name}
</span>
</div>
{selected && (
<span
className={clsx(
'absolute inset-y-0 right-0 flex items-center pr-4',
{
'text-white': active,
'text-indigo-600': !active,
}
)}
>
<Check />
</span>
)}
</li>
)
}}
</Listbox.Option>
)
})}
</Listbox.Options>
</Transition>
</div>
</div>
</>
)}
</Listbox>
)
}组件/图标/索引
import React from 'react'
export const Selector = () => (
<svg
className="w-5 h-5 text-indigo-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
)
export const Check = () => (
<svg
className="w-5 h-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clipRule="evenodd"
/>
</svg>
)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65527663
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号