使用组件

MDX 支持在 Markdown 文档中直接嵌入 rEFui JSX 组件。将可复用组件置于 components/ 目录，即可在任意页面中直接调用。

组件定义

// components/Callout.jsx
export default function Callout(props, ...children) {
	return <div class="callout">{...children}</div>
}

在 MDX 中调用

<Callout>
  提示：尽量保持章节短小精悍，以提升阅读体验。
</Callout>

客户端交互组件

若组件依赖浏览器 API，请使用 .client 后缀命名：

components/Map.client.jsx

交互示例：计数器

以下为一个简单的交互组件示例：

// components/Counter.client.jsx
import './Counter.css'
import { signal } from 'refui'

export default function Counter({ initial = 0 }) {
	const count = signal(initial)
	return (
		<div class="counter">
			<button on:click={() => count.value--}>-</button>
			<span>{count}</span>
			<button on:click={() => count.value++}>+</button>
		</div>
	)
}

鉴于该组件引用了服务端静态渲染不支持的 CSS 模块，需额外提供一份用于服务端静态渲染的替补版本：

// components/Counter.static.jsx
export default function Counter({ initial = 0 }) {
	return (
		<div>
			[ You need to enable JavaScript to load this component. ]
		</div>
	)
}

在页面中调用：

<Counter />

实际效果：

[ You need to enable JavaScript to load this component. ]

更高级的用法请查看自定义组件。