组件

Remax 用驼峰的方式来命令小程序组件,如:

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

Props

Remax 遵循 React 规范来命名小程序属性,如:

Remax

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

对应微信小程序

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

对应支付宝小程序

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

注册基础组件

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

假设小程序新增了一个 <foo-bar> 组件,你可以这么做以让 Remax 提前支持:

import { createHostComponent } from 'remax/macro';
const FooBar = createHostComponent('foo-bar', ['foo']);
function Page() {
return <FooBar foo="bar" />;
}

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

import { createHostComponent } from 'remax/macro';
const FooBar = createHostComponent('foo-bar', [
// 支持传入 [prop, alias] 形式的数组来起别名
['class', 'className'],
]);
function Page() {
return <FooBar className="class" />;
}

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

import { createHostComponent } from 'remax/macro';
const FooBar = createHostComponent<{ foo: string; }>('foo-bar', ['foo]);
function Page() {
return <FooBar foo="bar" />;
}

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

import { createHostComponent } from 'remax/macro';
const componentName = 'foo-bar';
const props = ['foo'];
// 必须直接写明组件名称和组件属性,不可用动态写法或变量传递的形式。
const FooBar = createHostComponent(componentName, props);
function Page() {
return <FooBar foo="bar" />;
}