---
title: 组件
summary: "介绍 Ray 组件的驼峰命名规范和 React 风格属性与原生小程序属性的映射关系。"
tags: [Ray组件命名规范, React风格组件属性, className与onTap属性映射]
questions:
  - Ray 中基础组件如 View、Text、Image 从哪里导入？
  - Ray 组件的属性命名和原生小程序有什么区别？
  - Ray 中的 className 和 onTap 分别对应原生小程序的什么属性？
  - Ray 组件的 style 属性支持对象写法吗？
  - Ray 中如何将 React 风格的属性映射到微信小程序的 class 和 bindtap？
---

# 组件

## 组件名

所有组件名称都是首字母大写的驼峰形式，如：

```js
import { View, Text, Image, ... } from '@ray-js/ray'
```

## 组件属性

Ray 按照 React 的风格来命名小程序属性，如：

Ray:

```xml
<View className="view" style={{ display: 'flex' }} onTap={handleClick} />
```

对应微信小程序：

```xml
<view class="view" style="display: flex;" bindtap="handleClick"></view>
```