快速開始

本頁假設你已經完成安裝，並引入了 theme.css 與用到的元件樣式。

無需 install

@lh-ui/react 沒有外掛機制：全部為命名匯出，直接按需引入即可。

import { LhButton } from '@lh-ui/react'
import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/button'

export default function App() {
  return <LhButton type="primary">开始使用</LhButton>
}

受控與非受控

受控元件同時支援 value + onChange（受控）與 defaultValue（非受控），語義與原生 React 表單一致：

import { useState } from 'react'
import { LhInput } from '@lh-ui/react'

function Demo() {
  const [value, setValue] = useState('')

  return (
    <>
      {/* 受控 */}
      <LhInput value={value} onChange={(val) => setValue(val)} />

      {/* 非受控 */}
      <LhInput defaultValue="默认值" />
    </>
  )
}

事件回呼是雙參數

所有表單元件的 onChange 都是 (value, event) 兩個參數：第一個是新值，第二個是原生事件。這與 lh-ui-plus 的 emit('change', [val, e]) 同構，方便從 Vue 遷移。

全域設定

用 LhConfigProvider 下發全域尺寸、語言與主題變數：

import { LhConfigProvider } from '@lh-ui/react'

export default function App() {
  return (
    <LhConfigProvider size="middle" locale="zh-CN">
      <YourApp />
    </LhConfigProvider>
  )
}

未包裹 LhConfigProvider 時元件也不會報錯——消費側有全欄位 undefined 的兜底預設值。

命令式服務

message 等命令式服務透過惰性建立的單例容器掛載，首次呼叫才建立 React root：

import { message, notification, loading } from '@lh-ui/react'
import '@lh-ui/react/style/message'

message.success('保存成功')
notification.success({ title: '保存成功', content: '作品已发布到画廊。' })
loading.show({ text: '提交中…' })

三個服務的定位：message 是輕量頂部提示，notification 是帶標題 / 正文的四角通知， loading 是全螢幕或局部的載入遮罩。詳見各自的元件文件。

與 lh-ui-plus 的關係

@lh-ui/react 與 @lh-ui/vue3（lh-ui-plus）同源同構：

• 元件邏輯完全相同，來自 @lh-ui/share/core，兩庫都不持有邏輯副本
• 樣式完全相同，來自 @lh-ui/share/styles，BEM 類別名一一對應
• props 同名同義，只做 React 慣用化改寫（v-model → value/onChange 等）

從 Vue 遷移請讀遷移指南。

伺服器端渲染（SSR）

元件對 SSR 安全：DOM 操作全部在 useEffect / useIsomorphicLayoutEffect 內執行，useLhLocale 用 useSyncExternalStore 提供 SSR 快照。命令式服務（message 等）在伺服器端呼叫時只打告警並 no-op。