---
title: WKView 视图容器
group:
  title: 基础组件
  path: /base/
---

## 何时使用

视图容器

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 类似于传统html中的div，本身不显示任何可视化元素,用于包裹各种元素内容。
 */
import React from 'react';
import { WKView, View } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const handleHoverChange = () => {
    console.log('触发长按效果');
  };

  return (
    <PageWrapper title="基本使用">
      <WKView className="w-screen p-3" onHoverChange={handleHoverChange} hoverStyle={{ color: 'red' }}>
        长按变红
      </WKView>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKView/index.d.ts' ></API>
