将 Alpine 组件转换为 React

Convert Alpine component to React

我正在尝试在 React 中转换一个 Alpine 组件(Select 使用第一个自定义头像)→ https://tailwindui.com/components/application-ui/forms/select-menus

要复制 Alpine 源代码,您可以打开“源代码”选项卡并从那里复制元素,或者我将其粘贴到下面(仅保留 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&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80","https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80","https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2.25&amp;w=256&amp;h=256&amp;q=80","https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80","https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80","https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80","https://images.unsplash.com/photo-1568409938619-12e139227838?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80","https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80","https://images.unsplash.com/photo-1584486520270-19eca1efcce5?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80","https://images.unsplash.com/photo-1561505457-3bcad021f8ee?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80"][value]'
            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;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&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;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&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;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&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2.25&amp;w=256&amp;h=256&amp;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",例如 SelectedNot Selected 在哪里使用。

我只是想将此组件转换为 React,但有些事情我不理解。非常感谢任何帮助:)

我选择了 Listbox component from @headlessui/react to achieve 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>
    )
}

components/icons/index

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>
)