image.png

    首先需要将第三方组件库下载到项目的 src 目录下,
    随后在页面或者组件里通过配置 usingComponents 指定需要引用的第三方组件即可,
    组件调用的时候需要按照 JSX 的使用规范来进行传参和事件绑定。

    usingComponents 指定的第三方组件名字需要以小写开头。

    1. import Taro, { Component } from '@tarojs/taro'
    2. import { View } from '@tarojs/components'
    3. function initChart () {
    4. // ....
    5. }
    6. export default class Menu extends Component {
    7. static defaultProps = {
    8. data: []
    9. }
    10. config = {
    11. // 定义需要引入的第三方组件
    12. usingComponents: {
    13. 'ec-canvas': '../../components/ec-canvas/ec-canvas' // 书写第三方组件的相对路径
    14. }
    15. }
    16. constructor (props) {
    17. super(props)
    18. this.state = {
    19. ec: {
    20. onInit: initChart
    21. }
    22. }
    23. }
    24. componentWillMount () {
    25. console.log(this) // this -> 组件 Menu 的实例
    26. }
    27. render () {
    28. return (
    29. <View>
    30. <ec-canvas id='mychart-dom-area' canvas-id='mychart-area' ec={this.state.ec}></ec-canvas>
    31. </View>
    32. )
    33. }
    34. }