本文章适合对React稍微有了解的工程师阅读。
近期，我要设计一个可被重用的组件（open-mind即时通讯前端组件），在此写下开发心得。初学React，非专业前端工程师，水平有限，重在抛砖引玉。
现在，我们来开始构建一个组件。
一个组件，就是一个React项目。可以通过npm init命令来新建一个项目。
$ cd ***** //定位到要建立项目的位置
$ npm init //新建一个项目
我的组件使用了ES6语法编写，由于目前浏览器只支持ES5，所以需要BABEL的支持，BABEL可将ES6代码转为ES5。另外我的组件除了依赖基本的React、React-dom还依赖于Antd等。所以编辑项目文件夹里的package.json，如下：
package.json内容：
| { "name": "open-mind", "version": "1.0.6", "description": "", "main": "lib/index.js", "private": false, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "babel src -d lib", "prepublish": "npm run build" }, "keywords": [ "im","strophe" ], "author": "TonyWong", "license": "ISC", "devDependencies": { "babel-cli": "^6.24.1", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-core": "^6.18.2", "babel-loader": "^6.2.8", "babel-plugin-add-module-exports": "^0.2.1", "babel-plugin-import": "^1.1.0", "babel-plugin-react-transform": "^2.0.2", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.6.1", "babel-preset-stage-0": "^6.16.0" }, "dependencies": { "react": "^0.14.8", "react-dom": "^0.14.8", "history": "^1.17.0", "strophe.js": "^1.2.4", "superagent": "^3.3.1", "antd": "^2.5.2", "layer": "^0.1.0" } } |
然后对插件进行下载，在项目位置下执行
$ npm install
执行完后，在项目位置添加一下几个文件夹：assets、src、style。
新建.babelrc(BABEL的配置文件，windows无法直接创建该文件，可通过echo指令或者其他ide软件进行创建)，添加如下内容:
.babelrc内容：
| { "presets": [ "es2015", "stage-0", "react" ] } |
最终的项目结构如下：
这样我们的组件项目的基本结构就建好了，我们在src中编写组件源码，具体React代码的编写这里就不介绍了，自行百度。最后在项目位置执行：
$ npm run build
该指令表示执行pakage.json中的build脚本。从pakage.json文件中可看出，该脚本的内容是，使用BABEL插件将src目录下的ES6代码转成ES5代码并存放在lib文件夹内。这样一个组件就构建好了。
现在在其他项目中（比如项目A）要使用该组件，只需要将刚才构建好的项目拷贝到项目A的node_modules文件夹中，就可以像引用其他组件一样，引用你自己开发的组件了。你也可以将你开发的组件发布到npm仓库中，然后通过npm install指令下载你发布的组件。
发布组件的过程很简单。首先在npm官网上注册一个账号。然后在项目位置执行如下指令：
$ npm login
根据提示填入账号、密码、邮箱地址。再执行如下指令即可：
$ npm publish
在进行组件代码开发时，我们要注意一个可重用的组件应该只做以下几件事：一、接收数据；二、渲染数据；三、组件内部逻辑。组件与后端交互的业务方法不应该封装在组件内，应该由调用组件的父组件内定义，并传入该组件。
以我开发的open-mind中的Im组件为例，它有以下几个属性：
userName：用户名
pwd：密码
nickName：昵称
themeStyle：样式类型
history：路由
imUrl：即时通讯服务器地址
imServletUrl：即时通讯Servlet服务地址
serverName：即时通讯服务器域名
resource：即时通讯资源名称
recSysMessageHandler：接收到消息后的回调函数
businessHandler：其他组件内需调用的业务方法
其中recSysMessageHandler和businessHandler接收的就是需要与后端服务器交互的业务逻辑方法。来看下传入businessHandler的一个实现。
| import Request from '../../../common/commonFunction/request'; import Config from '../../../config.json'; //获取用户信息 function getUserInfo(data,e, successCallback, errCallback){ Request.requestToUumsByPost("im/getUserInfo",data,e,successCallback,errCallback ); }; //获取人员机构树根节点 function findParents(data,e, successCallback, errCallback){ Request.requestByGet("im/findParents",{},e,successCallback,errCallback ); }; //获取人员机构树子节点 function findChildrens(data,e, successCallback, errCallback){ Request.requestByGet("im/findChildrens?orgId=" + data.orgId,{},e,successCallback,errCallback ); }; //查找用户 function getUserBySearch(data,e, successCallback, errCallback){ Request.requestToUumsByPost("im/getUserBySearch",data,e,successCallback,errCallback ); }; //下载文件地址 function downloadUrl(fieldId,fileName){ return Config.uumsServer+"im/download?fieldId="+fieldId+"&fileName="+encodeURI(fileName); }; let ImBusinessHandler={ getUserInfo:getUserInfo, findParents:findParents, findChildrens:findChildrens, getUserBySearch:getUserBySearch, uploadUrl:Config.uumsServer+"im/upload", downloadUrl:downloadUrl }; export default ImBusinessHandler; |
可以看出都是与后台有关系的一些业务方法。
如何开发可重用的React组件就简单介绍到这里。若有对例子感兴趣
$ npm i open-mind --save