组件

组件名

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

import { View, Text, Image, ... } from 'Rsmax/wechat'

组件属性

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

Rsmax：

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

对应微信小程序：

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

对应阿里小程序：

<view class="view" style="display: flex;" onTap="handleClick"></view>

注册基础组件

如果小程序添加了新的组件，而你所用的 Rsmax 版本还没提供该组件的支持，Rsmax 允许你自己创建一个新的基础组件。

假设小程序新增了一个 <foo-bar> 组件，你可以通过 createHostComponent 这个方法把这个组件注册到 Rsmax 中：

import * as React from 'react';
import { createHostComponent } from 'Rsmax/macro';

const FooBar = createHostComponent('foo-bar', ['foo']);

function Page() {
  return <FooBar foo="bar" />;
}

你也可以给基础组件的属性起别名，使其更符合 React 的命名风格：

import * as React from 'react';
import { createHostComponent } from 'Rsmax/macro';

const FooBar = createHostComponent('foo-bar', [
  // 支持传入 [prop, alias] 形式的数组来起别名
  ['class', 'className'],
]);

function Page() {
  return <FooBar className="class" />;
}

如果你使用的是 TypeScript，还可以定义 props 类型：

import * as React from 'react';
import { createHostComponent } from 'Rsmax/macro';

const FooBar = createHostComponent<{ foo: string; }>('foo-bar', ['foo']);

function Page() {
  return <FooBar foo="bar" />;
}

注意

组件名称和组件属性不能是动态变量，以下写法是错误的。

import * as React from 'react';
import { createHostComponent } from 'Rsmax/macro';

const componentName = 'foo-bar';
const props = ['foo'];
// 必须直接写明组件名称和组件属性，不可用动态写法或变量传递的形式。
const FooBar = createHostComponent(componentName, props);

function Page() {
  return <FooBar foo="bar" />;
}

ON THIS PAGE

组件#

组件名#

组件属性#

注册基础组件#

组件

组件名

组件属性

注册基础组件