{rows.map(({ item }) => (
{item.children && (
)}
{item.label}
))}
);
}
```
`trace` 是带 `children` 的 `WaterfallData`。也可以渲染全部行，让组件隐藏折叠 span 内部的行（被隐藏的行带 `hidden`），这样 `expanded` 可以保持非受控。选择与展开互相独立：`value` / `onValueChange` 管选中，`expanded` / `onExpandedChange` 管展开，非受控用 `defaultValue` 与 `defaultExpanded`，回调里 `details.cancel()` 可以拒绝变更。控制器由 `createWaterfallController()` 创建，`reveal(value)` 会展开某个 span 的所有祖先并聚焦它的行。
## 缩放与平移
`range` 是轴显示的时间区间 `[start, end]`（毫秒）。改它就是缩放或平移：条形与刻度跟着走，超出区间的条形收缩到边缘。不传时轴从最早的 start 跑到最晚的 end。
```tsx
const full: [number, number] = [0, 1200];
const [range, setRange] = React.useState(full);