# React · 用法

先使用 Edge.Provider 和 Edge.Surface。要直接连接现有组件，可以使用 useSurface。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/zh/docs/react/usage/

<a id="share-one-light"></a>

## 连接区域

请先完成[安装](https://edge.bolerish.com/zh/docs/installation/)。如果框架支持服务器组件，请在声明了 `"use client"` 的客户端模块中使用 Edge。

用 `Edge.Provider` 包裹共享光照的区域，只为需要响应的元素添加 `Edge.Surface`。下方两张卡片共享光照。嵌套的 Edge.Provider 会创建独立光照。

共享光照，保留原有组件

```tsx
<Edge.Provider>
  <Edge.Surface>Example card</Edge.Surface>
  <Edge.Surface>Another example card</Edge.Surface>
</Edge.Provider>
```

<a id="keep-your-styles"></a>

## 保留样式和事件

通过 `as` 选择要渲染的 HTML 标签。可直接使用该元素的 HTML 属性、事件和 ref，并通过 `className` 和 `style` 应用原有样式。Edge.Provider 不添加 DOM 元素，每个 Edge.Surface 渲染一个元素。

```tsx
<Edge.Surface as="button" type="button" onClick={handleExampleClick}>
  Example button
</Edge.Surface>
```

input 元素需要外层容器。若与现有装饰冲突，请参阅[集成注意事项](https://edge.bolerish.com/zh/docs/integration/)。外观可在[样式](https://edge.bolerish.com/zh/docs/styles/)中设置，动态效果见[动态效果](https://edge.bolerish.com/zh/docs/motion/)。

<a id="connect-existing-components"></a>

## 连接现有组件

如果 Card 或 Button 已渲染自己的 HTML 元素，请在组件内调用 [useSurface(options)](https://edge.bolerish.com/zh/docs/react/use-surface/#use-surface)，并将返回的 ref 传给该元素。组件应位于 Edge.Provider 内。React 18 的函数组件需要通过 `forwardRef` 转发 ref。

如果元素位置发生变化，请参阅[布局更新](https://edge.bolerish.com/zh/docs/integration/#refresh-after-layout-changes)。