Daifee-React-Component

用 React 封裝一套常用組件

所有組件都是 stateless 組件，但為方便，某些組件提供 API 調(diào)用方式的靜態(tài)方法。

[TOC]

使用前須知

源碼已構(gòu)建成 UMD 模塊發(fā)布到 NPM.

npm install -s daifee-react-component

依賴：

用法

建議用 webpack 構(gòu)建

Demos

將所有依賴(包括 Daifee-React-Component)與項目源碼打包為一個文件。

源碼：/example

配置：/website/webpack.config.demos.js

Demos-externals

將所有依賴(包括 Daifee-React-Component)用 加載。

源碼：/example

配置：/website/webpack.config.demos-externals.js

項目目錄結(jié)構(gòu)

/react-component

|-- dist 構(gòu)建后的代碼

|-- doc 文檔

|-- example 開發(fā)過程中的例子(也是在線 Demos 的源碼)

|-- src 項目源碼

|-- test 測試(還沒寫)

|-- website 網(wǎng)站(Demos 構(gòu)建配置)

|-- ...配置

開發(fā)

命令腳本：

npm install 安裝依賴

npm start 啟動本地開發(fā)服務(wù)器 localhost:8082

npm test 測試

npm run lint 檢測代碼

npm run lint:watch 監(jiān)聽文件變化，持續(xù)檢測代碼

npm run build 構(gòu)建編譯源碼

npm run build:website 構(gòu)建 website 項目

風(fēng)格

文件名(包含目錄)和標(biāo)識符(變量、函數(shù)名、屬性)都用使用“駝峰式”。

以模塊為單位創(chuàng)建文件，如果模塊為“類”則第一個字母大寫。

每個組件定義一個目錄，以組件名命名。

盡量使用 stateless component

某些組件為了方便使用，提供靜態(tài)方法作為直接調(diào)用的接口。

定義組件時用到的 props 必須在 propTypes 聲明，可以向組件傳遞任意 props(React 支持就行)。

踩到的坑

addComponentAsRefTo Invariant Violation

構(gòu)建 UMD 模塊

Daifee-React-Component 依賴 react-addons-css-transition-group 將其配置為 externals

// webpack.config.js

'react-addons-css-transition-group': {

// UMD 依賴模塊： root['React']['addons']['CSSTransitionGroup']

// 項目依賴模塊：module.exports = React.addons.CSSTransitionGroup;

// 作為項目依賴模塊時，root 的值不能是數(shù)組，只能是 {root: 'React.addons.CSSTransitionGroup'}

root: ['React','addons','CSSTransitionGroup'],

commonjs2: 'react-addons-css-transition-group',

commonjs: 'react-addons-css-transition-group',

amd: 'react-addons-css-transition-group'

}

如果項目依賴 Daifee-React-Component，并希望也將 react-addons-css-transition-group 配置為 externals，其配置卻與上面不一樣。

// webpack.config.demos-externals.js

externals: {

'react': 'React',

'react-dom': 'ReactDOM',

// 看我傻逼不？

'react-addons-css-transition-group': 'React.addons.CSSTransitionGroup',

'daifee-react-component': 'DaifeeReactComponent',

'xiscroll': 'IScroll'

}

總結(jié)

以上是生活随笔為你收集整理的react封装函数_GitHub - daifee/react-component: 用 React 封装一套常用组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。