react-solidlike

English | 中文

声明式 React 控制流组件库，灵感来源于 Solid.js。用于替代 JSX 中的三元表达式和 array.map()，让你的组件代码更加清晰易读。支持 React 和 React Native。

安装

``bash
npm install react-solidlike


或


bun add react-solidlike
`

组件

$3

替代三元表达式进行条件渲染。

`tsx
import { Show } from "react-solidlike";

// 基础用法




// 带 fallback
}>



// 使用 render props 获取类型安全的值

{(user) => }


// 带 onFallback 回调（用于重定向等副作用）
} onFallback={() => navigate('/login')}>


`

$3

替代 array.map() 进行列表渲染。

`tsx
import { For } from "react-solidlike";

// 基础用法

{(item) => }


// 带 keyExtractor
user.id}>
{(user) => }


// 带 fallback 处理空数组
}>
{(item, index) => }


// 使用 wrapper 包装元素
}>
{(item) =>

{item.name}

}

// 倒序渲染

{(msg) => }

// 使用 array 参数获取上下文信息

{(step, index, array) => (
data={step}
isFirst={index === 0}
isLast={index === array.length - 1}
/>
)}

`

$3

替代多个 if-else 或 switch 语句。

`tsx
import { Switch, Match, Default } from "react-solidlike";















`

$3

等待 Promise resolve 后渲染内容。

`tsx
import { Await } from "react-solidlike";

// 基础用法
}>
{(user) => }


// 带错误处理
promise={fetchData()}
loading={}
error={(err) => }
>
{(data) => }


// 支持非 Promise 值（用于缓存场景）
}>
{(data) => }

`

$3

替代 Array.from({ length: n }).map()。

`tsx
import { Repeat } from "react-solidlike";

// 渲染星级评分

{(i) => }


// 生成骨架屏占位

{(i) => }


// 使用 wrapper 包装元素
}>
{(i) => }


// 倒序渲染

{(i) =>

}

// 使用 length 参数显示进度

{(i, length) => (

)}

`

$3

按分隔符切割字符串并渲染每个部分。

`tsx
import { Split } from "react-solidlike";

// 基础用法 - 切割后不保留分隔符

{(part) => {part}}

// 渲染: ["a", "b", "c"]

// 保留分隔符

{(part) => {part}}

// 渲染: ["9+5", "=", "(9+1)+4"]

// 使用正则表达式分隔符

{(part) => {part}}

// 渲染: ["a", "1", "b", "2", "c", "3"]

// 带 wrapper 包装元素
}>
{(word) => {word}}


// 带 fallback 处理空字符串
}>
{(part) => {part}}


// 倒序渲染

{(part) => {part}}

// 渲染顺序: ["c", "b", "a"]
`

$3

根据条件动态选择要渲染的组件类型。

`tsx
import { Dynamic } from "react-solidlike";

// 动态选择按钮或链接
component={href ? 'a' : 'button'}
href={href}
onClick={onClick}
>
{label}


// 配合自定义组件
component={isAdmin ? AdminPanel : UserPanel}
user={currentUser}
/>

// React Native 中使用
component={isPressable ? Pressable : View}
onPress={handlePress}
>
Content

`

$3

捕获子组件树中的 JavaScript 错误，防止整个应用崩溃。

`tsx
import { ErrorBoundary } from "react-solidlike";

// 基础用法
}>



// 使用 render props 获取错误信息和重置函数
fallback={(error, reset) => (


)}
>

// resetKey 变化时自动重置
} resetKey={userId}>


`

$3

处理异步查询的各种状态（加载中、错误、空数据、成功）。可与 @tanstack/react-query、SWR、RTK Query 等配合使用。

`tsx
import { QueryBoundary } from "react-solidlike";
import { useQuery } from "@tanstack/react-query";

function UserList() {
const query = useQuery({ queryKey: ["users"], queryFn: fetchUsers });

return (
query={query}
loading={}
error={}
empty={}
>
{(users) => (


{users.map((user) => (

• {user.name}

))}


)}

);
}
`

#### Props

| 属性 | 类型 | 描述 |
| ----------- | ------------------------------------- | ------------ |
| query | QueryResult | 查询结果对象 |
| loading | ReactNode | 加载中显示 |
| error | ReactNode | 错误时显示 |
| empty | ReactNode | 空数据显示 |
| children | ReactNode \| (data: T) => ReactNode | 成功时渲染 |
| isEmptyFn | (data: T) => boolean | 自定义空判断 |

$3

只渲染一次子元素，忽略后续更新。适用于昂贵的计算或不应重新渲染的内容。

`tsx
import { Once } from "react-solidlike";

// 渲染昂贵的组件




// 防止父组件更新导致的重新渲染
function Parent() {
const [count, setCount] = useState(0);
return (



);
}
`

$3

仅在客户端（hydration 之后）渲染子元素。适用于依赖浏览器 API 或需要避免 SSR hydration 不匹配的场景。

`tsx
import { ClientOnly } from "react-solidlike";

// 基础用法




// 带 SSR 备选内容
}>



// 使用渲染函数延迟求值（避免访问 window）
}>
{() => }


// 避免 hydration 不匹配
--:--}>


`

$3

在指定延迟后显示或隐藏内容。适用于自动消失的通知、延迟加载的场景。

`tsx
import { Timeout } from "react-solidlike";

// 延迟后显示（mode="after"，默认）
}>



// 延迟后隐藏（mode="before"）




// 自动消失的提示
console.log("已消失")}>
保存成功


// 带加载状态的延迟渲染
}>


`

#### Props

| 属性 | 类型 | 描述 |
| ----------- | --------------------- | --------------------------------------------------------------- |
| ms | number | 延迟时间（毫秒） |
| mode | 'after' \| 'before' | 'after' = 延迟后显示，'before' = 延迟后隐藏，默认 'after' |
| children | ReactNode | 要渲染的内容 |
| fallback | ReactNode | 等待时显示的内容（仅 after 模式） |
| onTimeout | () => void | 超时发生时的回调 |

$3

基于 IntersectionObserver 的可见性渲染，进入视口才渲���。在 React Native 或不支持的环境中会直接渲染 children（优雅降级）。

`tsx
import { Visible } from "react-solidlike";

// 基础用法 - 进入视口时渲染




// 带占位符
}>



// 提前预加载（rootMargin）
}>



// 切换可见性（once=false 时离开视口会卸载）
console.log(v)}>


`

开发

`bash


安装依赖

bun install

运行测试

bun test

代码检查

bun run lint

构建

bun run build
``

License

MIT