組件

Remax 用駝峰的方式來命令小程序組件，如：

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

Props

Remax 遵循 React 規(guī)范來命名小程序?qū)傩?，如?/p>

Remax

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

對應(yīng)微信小程序

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

對應(yīng)支付寶小程序

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

注冊基礎(chǔ)組件

如果小程序添加了新的組件，而你所用的 Remax 版本還沒提供該組件的支持，Remax 允許你自己創(chuàng)建一個新的基礎(chǔ)組件。

假設(shè)小程序新增了一個 <foo-bar> 組件，你可以這么做以讓 Remax 提前支持：

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

你也可以給基礎(chǔ)組件的屬性起別名，使其更符合 React 的命名風(fēng)格：

import { createHostComponent } from 'remax/macro';
const FooBar = createHostComponent('foo-bar', [
  // 支持傳入 [prop, alias] 形式的數(shù)組來起別名
  ['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" />;
}

組件名稱和組件屬性不能是動態(tài)變量，以下寫法是錯誤的。

import { createHostComponent } from 'remax/macro';
const componentName = 'foo-bar';
const props = ['foo'];
// 必須直接寫明組件名稱和組件屬性，不可用動態(tài)寫法或變量傳遞的形式。
const FooBar = createHostComponent(componentName, props);
function Page() {