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. 添加属性了解。