React 工具

    React 组件相关的工具函数。

    安装

    npm
    yarn
    pnpm
    bun
    deno
    npx shadcn@latest add https://codebase.anyask.dev/r/utils-react.json

    renderEllipsisList

    通用的列表渲染函数，用于处理 Ellipsis 和 join 逻辑。

    功能特点

    • 自动将数组元素用分隔符连接
    • 支持自定义文本转换函数
    • 文本超出时显示省略号并支持 tooltip

    使用示例

    API

    签名:

    renderEllipsisList<T>(
  list: T[] | undefined,
  getDisplayText?: (item: T) => string | null | undefined,
  separator?: string
): React.ReactElement | null

    renderWithParentheses

    渲染两个字段，第一个字段在前，第二个字段用括号包围。

    功能特点

    • 自动处理空值情况
    • 自动去除首尾空格
    • 智能返回最简洁的格式

    使用示例

    API

    签名:

    renderWithParentheses(
  primary?: string | null,
  secondary?: string | null
): string | null | undefined

    API

    renderEllipsisList

    通用的列表渲染函数，用于处理 Ellipsis 和 join 逻辑。

    签名:

    renderEllipsisList&lt;T&gt;(
  list: T[] | undefined,
  getDisplayText?: (item: T) => string | null | undefined,
  separator?: string
): React.ReactElement | null
    参数说明类型默认值
    list要渲染的数组T[] | undefined-
    getDisplayText获取显示文本的函数(item: T) => string | null | undefined(item) => item?.toString()
    separator分隔符string、

    返回值: JSX 元素或 null

    示例:

    // 基础用法
renderEllipsisList(['张三', '李四', '王五']);
// 张三、李四、王五

// 自定义分隔符
renderEllipsisList(['a', 'b', 'c'], (item) => item, ', ');
// a, b, c

// 自定义显示文本
renderEllipsisList(
  [{ name: '张三', email: 'zhangsan@example.com' }],
  (item) => item.name
);
// 张三

    renderWithParentheses

    渲染两个字段，第一个字段在前，第二个字段用括号包围。

    签名:

    renderWithParentheses(
  primary?: string | null,
  secondary?: string | null
): string | null | undefined
    参数说明类型默认值
    primary主要字段（显示在括号外）string | null-
    secondary次要字段（显示在括号内）string | null-

    返回值: 格式化后的字符串，或 null/undefined

    示例:

    renderWithParentheses('张三', 'zhangsan@example.com');
// "张三

renderWithParentheses('张三', '');
// "张三"

renderWithParentheses('', 'zhangsan@example.com');
// "zhangsan@example.com"

renderWithParentheses('', '');
// null