# React 组件

> <KLineChartWC> 的属性，由 React 封装生成。

Source: https://kcq.nebutra.com/zh/docs/reference/react


<Callout>
  由固定提交的 

  [`packages/react/src/KLineChartWC.tsx`](https://github.com/TsekaLuk/KLineChartQuant/blob/1aa5e22c61313a34d08878ad895e604e0d4a85e9/packages/react/src/KLineChartWC.tsx)

   生成。
</Callout>

`KLineChartWC` 渲染 `<kline-chart>` 自定义元素并在客户端注册。它把下列属性同步为 attribute，并监听两个事件；其余 Vue 属性未暴露。

属性 [#属性]

| 属性                              | 类型                                                                | Attribute                       | 说明                                                                            |
| ------------------------------- | ----------------------------------------------------------------- | ------------------------------- | ----------------------------------------------------------------------------- |
| <code>yPaddingPx</code>         | <code>number</code>                                               | <code>y-padding-px</code>       | 价格区上下留白（CSS 像素）。                                                              |
| <code>minKWidth</code>          | <code>number</code>                                               | <code>min-k-width</code>        | 缩到最小时的 K 线宽度（CSS 像素）。                                                         |
| <code>maxKWidth</code>          | <code>number</code>                                               | <code>max-k-width</code>        | 放到最大时的 K 线宽度（CSS 像素）。                                                         |
| <code>rightAxisWidth</code>     | <code>number</code>                                               | <code>right-axis-width</code>   | 右侧价格轴宽度                                                                       |
| <code>bottomAxisHeight</code>   | <code>number</code>                                               | <code>bottom-axis-height</code> | 底部时间轴高度                                                                       |
| <code>priceLabelWidth</code>    | <code>number</code>                                               | <code>price-label-width</code>  | 价格标签额外宽度（用于显示涨跌幅，默认 60px）                                                     |
| <code>zoomLevels</code>         | <code>number</code>                                               | <code>zoom-levels</code>        | 缩放级别数量（默认 10）                                                                 |
| <code>initialZoomLevel</code>   | <code>number</code>                                               | <code>initial-zoom-level</code> | 初始缩放级别（1 \~ zoomLevels，默认居中）                                                  |
| <code>isFullscreen</code>       | <code>boolean</code>                                              | <code>is-fullscreen</code>      | 是否全屏（受控）。不绑定时为非受控模式，组件内部接管全屏 DOM 操作                                           |
| <code>onZoomLevelChange</code>  | <code>(detail: \{ level: number; kWidth: number }) => void</code> | —                               | 监听 `zoom-level-change`，回调收到事件的 `detail`；Vue 派发的是 emit 参数数组 `[level, kWidth]`。 |
| <code>onToggleFullscreen</code> | <code>() => void</code>                                           | —                               | 监听 `toggle-fullscreen`。                                                       |
| <code>style</code>              | <code>CSSProperties</code>                                        | —                               | 作用于宿主元素。                                                                      |
| <code>className</code>          | <code>string</code>                                               | —                               | 作用于宿主元素。                                                                      |