本文檔使用 書棧(BookStack.CN) 構(gòu)建 - -使用微信小程序第三方組件使用微信小程序第三方組件使用微信小程序第三方組件Taro 支持使用使用微信小程序的第三方組件，例如\h \hecharts-for-weixin，使用方式也異常的簡單。首先需要將第三方組件庫下載到項(xiàng)目的 src 目錄下，隨后在頁面或者組件里通過配置 usingComponents 指定需要引用的第三方組件即可，組件調(diào)用的時(shí)候需要按照 JSX 的使用規(guī)范來進(jìn)行傳參和事件綁定進(jìn)行傳參和事件綁定1. import Taro, { Component } from '@tarojs/taro'2. import { View } from '@tarojs/components'3. 4. function initChart () {5. // 6. }7. 8. export default class Menu extends Component {9. static defaultProps = {10. data: []11. }12. 13. config = {14. // 定義需要引入的第三方組件15. usingComponents: {16. 'ec-canvas': '../../components/ec-canvas/ec-canvas' // 書寫第三方組件的相對路徑17. }18. }19. 20. constructor(props) {21. super(props)22. this.state = {23. ec: {24. onInit: initChart25. }26. }27. }28. 29.29. componentWillMount () {30. console.log(this) // this -> 組件 Menu 的實(shí)例31. }32. 33. render () {34. return (35. <View>36. <ec-canvas id='mychart-dom-area' canvas-id='mychart-area' ec={this.state.ec}></ec-canvas>37. </View>38. )39. }40. }使用微信小程序第三方組件Taro 代碼與微信小程序代碼混寫Taro 代碼與微信小程序代碼混寫Taro 代碼與微信小程序代碼混寫Taro項(xiàng)目 支持 Taro 的代碼與小程序原生的頁面、組件代碼混合存在，只需要將原生的頁面、組件代碼放入 src 目錄下，隨后在 入口文件 app.js 中定義好 pages 配置指向?qū)?yīng)的原生的頁面即可，在原生頁面的配置中，你可以通過 usingComponents 來定義需要引入的組件，這里可以指定 Taro 組件同時(shí)也可以指定小程序原生的組件。

最佳實(shí)踐最佳實(shí)踐最佳實(shí)踐關(guān)于 JSX 支持程度補(bǔ)充說明由于 JSX 中的寫法千變?nèi)f化，我們不能支持到所有的 JSX 寫法，同時(shí)由于微信小程序端的限制，也有部分 JSX 的優(yōu)秀用法暫時(shí)不能得到很好地支持，特在此補(bǔ)充說明一下對于 JSX 的支持程度1. import 1. import { set as setGlobalData, get as getGlobalData } from 不能在包含 JSX 元素的 map 循環(huán)中使用 if 表達(dá)式不能使用 Array#map 之外的方法操作 JSX 數(shù)組不能在 JSX 參數(shù)中使用匿名函數(shù)暫不支持在 render() 之外的方法定義 JSX不允許在 JSX 參數(shù)(props)中傳入 JSX 元素不能在 JSX 參數(shù)中使用對象展開符不支持無狀態(tài)組件全局變量在 Taro 中推薦使用 Redux 來進(jìn)行全局變量的管理，但是對于一些小型的應(yīng)用， Redux 就可能顯得比較重了，這時(shí)候如果想使用全局變量，推薦如下使用。新增一個(gè)自行命名的新增一個(gè)自行命名的 JS 文件，例如 global_data.js ，示例代碼如下1. const globalData = {}2. 3. export function set (key, val) {4. globalData[key] = val5. }6. 7. export function get (key) {8. return globalData[key]9. }隨后就可以在任意位置進(jìn)行使用啦'./path/name/global_data'2'./path/name/global_data'2. 3. setGlobalData('test', 1)4. 5. getGlobalData('test')最佳實(shí)踐不能在自定義組件中寫 children (taro/custom-component-children)不能在自定義組件中寫 children (taro/custom-componentchildren)不能在自定義組件中寫 children (taro/customcomponent-children)在 Nerv/React 中，自定義組件嵌套實(shí)際上也是通過 props 來實(shí)現(xiàn)的，只是 children 是一個(gè)特殊的 prop 。而對于 Taro，文檔已闡述過不能通過 props 來傳遞 JSX 元素。更多詳情請查看文檔\h \hJSX \h簡介。規(guī)則詳情以下代碼會(huì)被以下代碼會(huì)被 ESLint 提示警告，同時(shí)在 Taro（小程序端）也不會(huì)有效：1. <CustomComponent>test</CustomComponent>2. 3. <CustomComponent>{'test'}</CustomComponent>4. 5. <CustomComponent>6. <Other />7. </CustomComponent>8. 9. <Typo>{}</Typo>以下代碼不會(huì)被警告，也應(yīng)當(dāng)在 Taro 任意端中能夠運(yùn)行：11. <CustomComponent />2. 3. <CustomComponent> </CustomComponent>4. 5. <ScrollView>test</ScrollView>6. 7. <View>test</View>8. 9. <View>10. <CustomComponent />11. </View>不能在自定義組件中寫 children (taro/custom-component-children)解決方案請查看文檔\h \hJSX \h簡介。該特性可能會(huì)在下一個(gè) Major 版本的 Taro 中得到支持。

不能在包含 JSX 元素的 map 循環(huán)中使用 if 表達(dá)式(taro/if-statement-in-map-loop)不能在包含 JSX 元素的 map 循環(huán)中使用 if 表達(dá)式(taro/ifstatement-in-map-loop)不能在包含 JSX 元素的 map 循環(huán)中使用 if 表達(dá)式(taro/if-statement-in-map-loop)規(guī)則詳情以下代碼會(huì)被以下代碼會(huì)被 ESLint 提示警告，同時(shí)在 Taro（小程序端）也不會(huì)有效：1. numbers.map((number) => {2. let element = null3. const isOdd = number % 24. if (isOdd) {5. element = <Custom />6. }7. return element8. })以下代碼不會(huì)被警告，也應(yīng)當(dāng)在 Taro 任意端中能夠運(yùn)行：11. numbers.map((number) => {2. let isOdd = false3. if (number % 2) {4. isOdd = true5. }6. return isOdd && <Custom />7. })解決方案盡量在盡量在 map 循環(huán)中使用條件表達(dá)式或邏輯表達(dá)式。1. numbers.map((number) => {2. const isOdd = number % 23. return isOdd ? <Custom /> : null4. })5.5. 6. numbers.map((number) => {7. const isOdd = number % 28. return isOdd && <Custom />9. })當(dāng)測試用例和線上項(xiàng)目都檢測通過時(shí)，Taro 將很快（下一個(gè) Minor 版本）支持這一特性。不能在包含JSX元素的map循環(huán)中使用if表達(dá)式()taro/if-statement-in-map-loop不能使用 Array#map 之外的方法操作 JSX 數(shù)組 (taro/manipulate-jsx不能使用 Array#map 之外的方法操作 JSX 數(shù)組(taro/manipulate-jsx不能使用 Array#map 之外的方法操作 JSX 數(shù)組(taro/manipulate-jsx-as-array)Taro 在小程序端實(shí)際上把 JSX 轉(zhuǎn)換成了字符串模板，而一個(gè)原生 JSX 表達(dá)式實(shí)際上是一個(gè)React/Nerv 元素(react-element)的構(gòu)造器，因此在原生 JSX 中你可以隨意地一組 React 元素進(jìn)行操作。但在 Taro 中你只能使用 map 方法，Taro 轉(zhuǎn)換成小程序中 wx:for 。規(guī)則詳情以下代碼會(huì)被以下代碼會(huì)被 ESLint 提示警告，同時(shí)在 Taro（小程序端）也不會(huì)有效：1. test.push(<View />)2. 3. numbers.forEach(numbers => {4. if (someCase) {5. a = <View />6. }7. })8. 9. test.shift(<View />)10. 11. components.find(component => {12. return component === <View />13. })14. 15. components.some(component => component.constructor.__proto__ === <View />.constructor)以下代碼不會(huì)被警告，也應(yīng)當(dāng)在 Taro 任意端中能夠運(yùn)行：11. numbers.filter(Boolean).map((number) => {2. const element = <View />3. return <View />4. })不能使用 Array#map 之外的方法操作 JSX 數(shù)組 (taro/manipulate-jsx解決方案先處理好需要遍歷的數(shù)組，然后再用處理好的數(shù)組調(diào)用先處理好需要遍歷的數(shù)組，然后再用處理好的數(shù)組調(diào)用 map 方法。1. numbers.filter(isOdd).map((number) => <View />)2. 3. for (let index = 0; index < array.length; index++) {4. // do you thing with array5. }6. 7. const element = array.map(item => {8. return <View />9. })除非微信小程序開放更多能力，目前看不到能支持該特性的任何可能性。

不能在 JSX 參數(shù)中使用匿名函數(shù)(taro/no-anonymous-function-in-pr不能在 JSX 參數(shù)中使用匿名函數(shù)(taro/no-anonymous-functionin-pr不能在 JSX 參數(shù)中使用匿名函數(shù)(taro/noanonymous-function-in-props)詳情請看文檔\h \h事件處理。使用\h使用\h \h bin\hd\h \h 或 \h數(shù)類參定函數(shù)。\h綁1. <View onClick={ps.hanldeClick.bind(this)} />以下代碼會(huì)被以下代碼會(huì)被 ESLint 提示警告，同時(shí)在 Taro（小程序端）也不會(huì)有效：1. <View onClick={() => this.handleClick()} />2. 3. <View onClick={(e) => this.handleClick(e)} />4. 5. <View onClick={() => ({})} />6. 7. <View onClick={function () {}} />8. 9. <View onClick={function (e) {this.handleClick(e)}} />以下代碼不會(huì)被警告，也應(yīng)當(dāng)在 Taro 任意端中能夠運(yùn)行：11. <View onClick={this.hanldeClick} />2. 3. <View onClick={ps.hanldeClick} />4. 5. <View onClick={this.hanldeClick.bind(this)} />6. 7. <View onClick={ps.hanldeClick.bind(this)} />解決方案不能在 JSX 參數(shù)中使用匿名函數(shù)(taro/no-anonymous-function-in-pr當(dāng)測試用例和線上項(xiàng)目都檢測通過時(shí)，Taro 將很快（下一個(gè) Minor 版本）支持這一特性。

暫不支持在 render() 之外的方法定義 JSX暫不支持在 render() 之外的方法定義 JSX暫不支持在 render() 之外的方法定義 JSX由于微信小程序的 template 不能動(dòng)態(tài)傳值和傳入函數(shù)，Taro 暫時(shí)也沒辦法支持在類方法中定義JSX。規(guī)則詳情以下代碼會(huì)被以下代碼會(huì)被 ESLint 提示警告，同時(shí)在 Taro（小程序端）也不會(huì)有效：1. class App extends Component {2. _render() {3. return <View />4. }5. }6. 7. class App extends Component {8. renderHeader(showHeader) {9. return showHeader && <Header />10. }11. }12. 13. class App extends Component {14. renderHeader = (showHeader) => {15. return showHeader& & <Header />16. }17. }解決方案在在 render 方法中定義。1. class App extends Component {2. 3. render () {4. const { showHeader, showMain } = this.state5. const header = showHeader && <Header />6.6. const main = showMain && <Main />7. return (8. <View>9. {header}10. {main}11. </View>12. )13. }14. }當(dāng)測試用例和線上項(xiàng)目都檢測通過時(shí)，Taro 將很快（下一個(gè) Minor 版本）支持這一特性。暫不支持在render()之外的方法定義JSX不允許在 JSX 參數(shù)(props)中傳入 JSX 元素(taro/no-jsx-in-props)不允許在 JSX 參數(shù)(props)中傳入 JSX 元素(taro/no-jsx-in-props)不允許在 JSX 參數(shù)(props)中傳入 JSX 元素(taro/no-jsx-in-props)由于微信小程序內(nèi)置的組件化的系統(tǒng)不能通過屬性（props） 傳函數(shù)，而 props 傳遞函數(shù)可以說React 體系的根基之一，我們只能自己實(shí)現(xiàn)了一套組件化系統(tǒng)。而自制的組件化系統(tǒng)則不能使用內(nèi)置組件化的 slot 功能。兩權(quán)相害取其輕，我們暫時(shí)只能不支持該功能。規(guī)則詳情以下代碼會(huì)被以下代碼會(huì)被 ESLint 提示警告，同時(shí)在 Taro（小程序端）也不會(huì)有效：1. <Custom child={<View />} />2. 3. <Custom child={() => <View />} />4. 5. <Custom child={function () { <View /> }} />6. 7. <Custom child={ary.map(a => <View />)} />解決方案通過 props 傳值在 JSX 模板中預(yù)先判定顯示內(nèi)容。該特性可能會(huì)在下一個(gè) Major 版本的 Taro 中得到支持。不能在 JSX 參數(shù)中使用對象展開符(Object spread)(taro/no-spread-in-props)不能在 JSX 參數(shù)中使用對象展開符(Object spread)(taro/nospread-in-props)不能在 JSX 參數(shù)中使用對象展開符(Object spread)(taro/no-spread-in-props)微信小程序組件要求每一個(gè)傳入組件的參數(shù)都必須預(yù)先設(shè)定好，而對象展開符則是動(dòng)態(tài)傳入不固定數(shù)量的參數(shù)。所以 Taro 沒有辦法支持該功能。規(guī)則詳情以下代碼會(huì)被以下代碼會(huì)被 ESLint 提示警告，同時(shí)在 Taro（小程序端）也不會(huì)有效：1. <View {...ps} />2. 3. <View {...props} />4. 5. <Custom {...props} />以下代碼不會(huì)被警告，也應(yīng)當(dāng)在 Taro 任意端中能夠運(yùn)行：11. const { id, ...rest } = obj2. 3.