文档

2. 自定义组件说明

更新时间:

本文简要说明自定义组件项目结构和特点。

项目结构

目录结构如下:

├── a.md
├── abc.json
├── build.json
├── demo
│   └── debug.md
├── dist
│   ├── MobiPcComponentABC.css
│   ├── MobiPcComponentABC.js
│   ├── mpSrc.zip
│   └── package.json
├── dist.zip
├── package-lock.json
├── package.json
├── readme.md
├── src
│   ├── api
│   ├── config.ts
│   ├── index.scss
│   └── index.tsx
├── test
│   ├── index.test.jsx
│   └── setupTests.js
└── tsconfig.json

比较重要的文件目录如下:

  1. src/api 依赖的 API 接口定义

  2. src/index.tsx 实现代码

  3. src/config.ts 配置文件

  4. build.json 编译配置

  5. dist/ 和 dist.zip 编译产物

组件实现

查看 src/index.tsx 的内容:

import React from 'react';
import config from './config';
import './index.scss';

interface Props {}

const MobiPcComponentABC = (props: Props) => {
  return (
    <div className="MobiPcComponentABC">
      <div>{`Hello MobiPcComponentABC ~ 这是一个最简单的组件`}</div>
    </div>
  );
};

MobiPcComponentABC.config = config;

export default MobiPcComponentABC;

通过这个文件,我们可以看出以下信息:

  1. 自定义组件就是一个 React 组件。

  2. 配置保存在组件的静态属性 config 上。

配置说明

配置文件内容如下:

import { API_VERSION, Category } from './api';

export default {
  apiVersion: API_VERSION,
  version: '1.0',
  isContainer: false,
  title: '',
  componentName: 'MobiPcComponentABC',
  category: Category.COMMON,
  configure: [],
};

这里大部分配置都是初始化项目自动生成的,所以不需要特别改动。

具体配置含义请参考组件配置

平台API

src/api 目录包括了组件依赖的平台 API 的所有定义。

在组件开发过程中可以引用相关定义辅助代码开发。

后续如果升级 API,只需要初始化一个新的组件项目,用最新的 src/api 目录替换旧的 src/api 目录即可。

编译产物

查看编译产物,可以看出这是组件的 umd 产物。

平台加载组件,就是加载组件的 umd 产物。

特点

了解项目结构后,可以看出自定义组件在本质上和前端组件一样,但有以下区别:

  1. 基于 React 框架开发,是 React 组件。

  2. 构建产物为 umd 产物,其它形式平台无法加载。

  3. 通过组件上的静态属性 config 保存组件的配置。

  4. 依赖和使用平台提供的 API 接口。

接下来

在开发 React 组件时,Props 的定义是开发者决定的,调用方只需要按照定义传递参数即可。但是在平台用户搭建应用时,如何向组件传递 Props 参数呢,请查看3. 添加属性了解。