小程序自定義組件

以支付寶小程序的 Badge 組件為例：

import React from 'react';
import { View } from 'remax/alipay';
import Badge from 'mini-antui/es/badge'; // 直接當(dāng)成 React 組件引用，無需申明 useComponents
export default () => (
  <View>
    <Badge>
      <View slot="inner">Remax</View>
    </Badge>
  </View>
);

注意事項

請按照自定義組件的定義方式聲明屬性（并非所有組件都采用駝峰的方式命名屬性）。

錯誤：

import React from 'react';
import { View } from 'remax/alipay';
import VantIcon from 'vant-weapp/dist/icon';
export default () => {
  const handleClick = () => {};
  return (
    <View>
      {/** vant-weapp 中 icon 的屬性定義為  class-prefix, bindclick，所以應(yīng)遵循其命名規(guī)則 */}
      <VantIcon
        name="close"
        classPrefix="custom-class-prefix"
        onClick={handleClick}
      />
    </View>
  );
};

正確：

import React from 'react';
import { View } from 'remax/alipay';
import VantIcon from 'vant-weapp/dist/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/alipay';
import Badge from 'mini-antui/es/badge';
export default () => (
  <View>
    <Badge>
      <Text slot="inner">Remax</Text>
    </Badge>
  </View>
);

正確：

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

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

錯誤：

import React from 'react';
import { View } from 'remax/alipay';
import Badge from 'mini-antui/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/alipay';
import Badge from 'mini-antui/es/badge';
export default () => {
  return (
    <View>
      <Badge text={1}>
        <View slot="inner">Remax</View>
      </Badge>
    </View>
  );
};