React 日程表与数据表格

日程表和数据表格也有 React 版本，位于 @needless-ui/react 中：功能、键盘操作和无障碍支持都与 Angular 版相同，样式表和 MIT 许可证也一样。其他组件也将陆续推出。它们需要 React 19，可用于 Next.js App Router 和 Vite。

安装

install.sh

pnpm add @needless-ui/react @needless-ui/css

导入样式

组件本身不带样式。请在应用的一个 CSS 文件中导入一次样式表。

globals.css

/* app/globals.css in Next.js, src/index.css with Vite */
@layer reset, nui, app;
@import '@needless-ui/css';

层的用法与 Angular 中相同：重置样式放进一个在 nui 之前声明的层中；使用 Tailwind CSS 时，把 nui 放在 Tailwind 的 base 层和 utilities 层之间，详见快速开始。

日程表

每个组件都有独立的入口点。日程表显示你传入的 events，并在用户移动日程或为新日程选择时间时调用你的回调：日程由你自己保存。

planner.tsx

数据表格

请在组件外部定义 columns，这样表格就不会在每次渲染时重做一遍。编辑会以新的行调用 onRowsChange，导出 Excel 等方法则在表格的 ref 上。

orders.tsx

React 风格的 API

React 组件与 Angular 组件遵循相同的规范，因此两者的 API 一一对应，只是换成了 React 的写法。日程表和数据表格的 API 页面列出了所有 prop。

Angular API 及其在 React 中的对应
Angular	React
模型：`[(view)]`	状态：`view` 配合 `onViewChange`，或由组件自行保存的 `defaultView`
输出：`(eventClick)`	回调：`onEventClick`
模板：`<ng-template nuiSchedulerEvent>`	负责绘制的函数：`renderEvent`
方法：`scheduler.next()`	`ref` 上的方法：`ref.current.next()`
用于树形数据的 `children`	`getChildren`：React 把 `children` 留给元素使用
`locale`，默认为应用的 `LOCALE_ID`	`locale`，默认为 `en-US`

服务端渲染

两个组件都能在服务端渲染，并在浏览器中水合。这个包已把它们标记为客户端组件，因此 Server Component 可以用可序列化的 props 渲染它们，nuiSchedulerFromIcs 等辅助函数也能在服务端运行。回调无法传到浏览器：接收回调的组件要放进你自己的客户端组件中，就像上面的两个示例那样。

取决于用户环境的内容会等到浏览器中才显示：日程表上表示当前时间的线，以及今天是哪一天。由服务端渲染日程表时，请为它设置 defaultDate，因为服务器上的今天未必是用户的今天。