# 安装单个组件（推荐）
npm install @radix-ui/react-dialog
npm install @radix-ui/react-dropdown-menu
npm install @radix-ui/react-popover
 
# 或使用统一包（2026年2月推出）
npm install radix-ui

import * as Dialog from '@radix-ui/react-dialog'
 
export function MyDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <button>打开对话框</button>
      </Dialog.Trigger>
      
      <Dialog.Portal>
        <Dialog.Overlay className="dialog-overlay" />
        <Dialog.Content className="dialog-content">
          <Dialog.Title>标题</Dialog.Title>
          <Dialog.Description>描述内容</Dialog.Description>
          
          <Dialog.Close asChild>
            <button>关闭</button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  )
}

import * as Tooltip from '@radix-ui/react-tooltip'
import { useState } from 'react'
 
export function TooltipDemo() {
  const [open, setOpen] = useState(false)
  
  return (
    <Tooltip.Provider>
      <Tooltip.Root open={open} onOpenChange={setOpen}>
        <Tooltip.Trigger asChild>
          <button>悬停查看</button>
        </Tooltip.Trigger>
        
        <Tooltip.Portal>
          <Tooltip.Content side="top" className="tooltip-content">
            提示文本
            <Tooltip.Arrow className="tooltip-arrow" />
          </Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  )
}

<Select.Root>
  <Select.Trigger />
  <Select.Value />
  <Select.Portal>
    <Select.Content>
      <Select.Viewport>
        <Select.Item value="option1">选项 1</Select.Item>
        <Select.Item value="option2">选项 2</Select.Item>
      </Select.Viewport>
    </Select.Content>
  </Select.Portal>
</Select.Root>

<Dialog.Portal>
  <Dialog.Content>...</Dialog.Content>
</Dialog.Portal>

// 非受控
<Dialog.Root defaultOpen={false}>
 
// 受控
<Dialog.Root open={isOpen} onOpenChange={setIsOpen}>

<Accordion.Root type="single">
  <Accordion.Item value="item1">
    <Accordion.Trigger>标题</Accordion.Trigger>
    <Accordion.Content>内容</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

<button
  data-state={open ? 'open' : 'closed'}
  className="custom-button"
>
  {children}
</button>

<Dialog.Trigger asChild>
  <CustomButton>打开</CustomButton>
</Dialog.Trigger>

<Select.Root value={value} onValueChange={(val: string) => setValue(val)}>

.dialog-content[data-state='open'] {
  animation: fadeIn 200ms ease-out;
}
.dialog-content[data-state='closed'] {
  animation: fadeOut 200ms ease-in;
}

{
  "compilerOptions": {
    "strict": true,
    "jsx": "react-jsx",
    "moduleResolution": "bundler"
  }
}

module.exports = {
  extends: [
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
  ],
  rules: {
    'react/prop-types': 'off', // TypeScript 已处理
  },
}

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import * as Dialog from '@radix-ui/react-dialog'
 
test('打开对话框', async () => {
  render(
    <Dialog.Root>
      <Dialog.Trigger>打开</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Content>
          <Dialog.Title>标题</Dialog.Title>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  )
  
  await userEvent.click(screen.getByText('打开'))
  expect(screen.getByRole('dialog')).toBeInTheDocument()
})

// 动态导入
const DatePicker = dynamic(() => import('./DatePicker'), {
  ssr: false,
})

// 检查 data-state
<button data-state={open ? 'open' : 'closed'}>
 
// 调试焦点
<div tabIndex={-1} onFocus={() => console.log('focused')}>
 
// 检查 ARIA 属性
<Dialog.Content aria-describedby="description">

// Portal 自动优化 z-index
<Dialog.Portal container={document.getElementById('root')}>
  <Dialog.Content>...</Dialog.Content>
</Dialog.Portal>

// 安全的 HTML 注入
<div dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />

import { axe, toHaveNoViolations } from 'jest-axe'
 
test('无可访问性违规', async () => {
  const { container } = render(<Dialog.Root>...</Dialog.Root>)
  const results = await axe(container)
  expect(results).toHaveNoViolations()
})

// 封装通用对话框
function BaseDialog({
  open,
  onOpenChange,
  title,
  children,
}: {
  open: boolean
  onOpenChange: (open: boolean) => void
  title: string
  children: React.ReactNode
}) {
  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <Dialog.Portal>
        <Dialog.Overlay className="dialog-overlay" />
        <Dialog.Content className="dialog-content">
          <Dialog.Title>{title}</Dialog.Title>
          {children}
          <Dialog.Close className="dialog-close">×</Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  )
}

// Tailwind CSS + data-state
<button
  data-state={open ? 'open' : 'closed'}
  className="
    bg-gray-100 
    data-[state=open]:bg-gray-200 
    data-[state=closed]:bg-gray-100
  "
>

// CSS 动画
.dialog-content {
  animation: fadeIn 200ms ease-out;
}
.dialog-content[data-state='closed'] {
  animation: fadeOut 200ms ease-in;
}
 
// Framer Motion
<Dialog.Content
  asChild
  initial={{ opacity: 0, scale: 0.95 }}
  animate={{ opacity: 1, scale: 1 }}
  exit={{ opacity: 0, scale: 0.95 }}
>

import { useForm } from 'react-hook-form'
 
function FormWithSelect() {
  const { register, handleSubmit } = useForm()
  
  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <Select.Root name="category" {...register('category')}>
        <Select.Trigger />
        <Select.Content>
          <Select.Item value="tech">技术</Select.Item>
          <Select.Item value="design">设计</Select.Item>
        </Select.Content>
      </Select.Root>
    </form>
  )
}

// 异步加载数据
function AsyncSelect() {
  const [data, setData] = useState([])
  const [error, setError] = useState(null)
  
  useEffect(() => {
    fetchData()
      .then(setData)
      .catch(setError)
  }, [])
  
  if (error) return <div>加载失败</div>
  
  return (
    <Select.Root>
      <Select.Trigger />
      <Select.Content>
        {data.map(item => (
          <Select.Item key={item.id} value={item.id}>
            {item.name}
          </Select.Item>
        ))}
      </Select.Content>
    </Select.Root>
  )
}

// 避免不必要的重渲染
const MemoizedDialog = React.memo(({ open, onClose }) => (
  <Dialog.Root open={open} onOpenChange={onClose}>
    <Dialog.Content>...</Dialog.Content>
  </Dialog.Root>
))
 
// 延迟加载大组件
const DataTable = React.lazy(() => import('./DataTable'))