首页 › React › 工程化与架构

Props 类型

// 基础 Props
interface ButtonProps {
  label: string
  variant?: 'primary' | 'secondary'
  disabled?: boolean
  onClick: () => void
  children?: React.ReactNode
}

// 样式相关 Props
interface StyledProps {
  className?: string
  style?: React.CSSProperties
}

// 事件 Props
interface InputProps {
  onChange?: (value: string) => void      // 简化版
  onChange?: React.ChangeEventHandler<HTMLInputElement>  // 原生版
  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void
}

// 泛型 Props
interface ListProps<T> {
  items: T[]
  renderItem: (item: T, index: number) => React.ReactNode
  keyExtractor: (item: T) => string
}

组件类型

// 函数组件
const MyComponent: React.FC<Props> = (props) => <div />
// 或显式返回类型
function MyComponent(props: Props): JSX.Element { return <div /> }

// forwardRef 泛型
const FancyInput = forwardRef<HTMLInputElement, InputProps>(
  (props, ref) => <input ref={ref} {...props} />
)

Hooks 类型

// useState
const [count, setCount] = useState<number>(0)
const [user, setUser] = useState<User | null>(null)

// useRef
const inputRef = useRef<HTMLInputElement>(null)         // DOM
const countRef = useRef<number>(count)                  // 可变值
countRef.current = count

// useReducer
type Action = { type: 'SET'; payload: string } | { type: 'RESET' }
const [state, dispatch] = useReducer(reducer, initialState)

事件类型

// 表单事件
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
onSubmit: (e: React.FormEvent<HTMLFormElement>) => void

// 鼠标事件
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void
onMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => void

// 键盘事件
onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void

// 拖拽事件
onDragStart: (e: React.DragEvent<HTMLDivElement>) => void

小结

• interface 定义 Props，? 可选属性。
• 泛型组件 <T> 处理列表、选择器等通用场景。
• React.ChangeEvent React.MouseEvent 等类型化事件参数。
• forwardRef<RefType, PropsType> 转发 Ref。
• useRef<Type>(null!) 非空断言初始化。

上一节：lazy / Suspense 与虚拟列表 下一节：Monorepo 与 CI/CD

贡献者: 布欧-Lewyon