小程序自定义组件

你可以在 React 组件中直接使用小程序的自定义组件。包括支持原生 UI 组件库,如:weui, min-ali-ui等等

以阿里小程序的 Badge 组件为例:

import React from 'react';
import { View } from 'remax/ali';
import Badge from 'mini-ali-ui/es/badge'; // 直接当成 React 组件引用,无需申明 useComponents
export default () => (
<View>
<Badge>
<View slot="inner">Remax</View>
</Badge>
</View>
);

使用项目中的自定义组件:

import React from 'react';
import { View } from 'remax/ali';
import NativeCard from './native-card'; // native-card 是一个原生自定义组件
export default () => (
<View>
<NativeCard />
</View>
);

组件类型

如果你使用的是 TypeScript,使用第三方小程序自定义组件时需要自己写组件类型,还是以 mini-ali-ui/es/badge 为例。

完整做法

  1. tsconfig.json 新增配置:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": [ "./typings/*" ]
},
...
}
}
  1. 新建 typings/min-ali-ui/es/badge.d.ts 文件
  2. 写入以下内容:
import { ComponentType } from 'react';
declare const Badge: ComponentType<{
className?: string;
text?: string;
dot?: boolean;
overflowCount?: number;
withArrow?: boolean;
direction?: 'middle' | 'left' | 'right';
stroke?: boolean;
}>;
export default Badge;

偷懒做法

typings/index.d.ts 写入以下内容:

declare module 'mini-ali-ui/es/badge';

注意事项

请按照自定义组件的定义方式声明属性(并非所有组件都采用驼峰的方式命名属性)。

错误:

import React from 'react';
import { View } from 'remax/ali';
import VantIcon from '@vant/weapp/lib/icon';
export default () => {
const handleClick = () => {};
return (
<View>
{/** vant-weapp 中 icon 的属性定义为 class-prefix, bindclick,所以应遵循其命名规则 */}
<VantIcon name="close" classPrefix="custom-class-prefix" onClick={handleClick} />
</View>
);
};

正确:

import React from 'react';
import { View } from 'remax/ali';
import VantIcon from '@vant/weapp/lib/icon';
export default () => {
const handleClick = () => {};
return (
<View>
<VantIcon name="close" class-prefix="custom-class-prefix" bindclick={handleClick} />
</View>
);
};

对于带有具名 slot 的组件,具名 slot 部分的最外层只能用 View 组件。

错误:

import React from 'react';
import { View } from 'remax/ali';
import Badge from 'mini-ali-ui/es/badge';
export default () => (
<View>
<Badge>
<Text slot="inner">Remax</Text>
</Badge>
</View>
);

正确:

import React from 'react';
import { View } from 'remax/ali';
import Badge from 'mini-ali-ui/es/badge';
export default () => (
<View>
<Badge>
<View slot="inner">Remax</View>
</Badge>
</View>
);

不能在小程序自定义组件上使用 “Spread Attributes”。

错误:

import React from 'react';
import { View } from 'remax/ali';
import Badge from 'mini-ali-ui/es/badge';
export default () => {
const badgeProps = {
text: 1,
};
return (
<View>
<Badge {...badgeProps}>
<View slot="inner">Remax</View>
</Badge>
</View>
);
};

正确:

import React from 'react';
import { View } from 'remax/ali';
import Badge from 'mini-ali-ui/es/badge';
export default () => {
return (
<View>
<Badge text={1}>
<View slot="inner">Remax</View>
</Badge>
</View>
);
};