【避坑指“難”】Taro跨多端開發，小程式報錯：MiniProgramError Super expression must either be null or a function

小程式開發工具的控制台報錯：

MiniProgramError onchange is not defined

ReferenceError: onchange is not defined

如下圖：

代碼如下：

index.jsx

import Taro  from '@tarojs/taro'
import React, { Component } from 'react'
import { View, Text ,Button} from '@tarojs/components'
import './index.less'
import Child from './Child'

export default class Index extends Component {
  config={
    navigationBarTitleText:'首頁'
  }
  state={
    name:'張三'
  }
  componentWillMount () { }

  componentDidMount () { 
    //this.setState({name:"李四"})
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  click(){
    this.setState({name:'李四'},()=>{
      console.log(this.state.name)
    });
  }
  change(){
    this.setState({name:"改變name值"})
  }
  render () {
    return (
      <View className='index'>
        <Child name={this.state.name} onchange={this.change.bind(this)}/>
        <Button onClick={this.click}>改變名字</Button>
        <Text>{this.state.name}</Text>
      </View>
    )
  }
}

           

Child.jsx

import Taro from '@tarojs/taro';
import {View,Text,Button} from "@tarojs/components";

class Child extends Component{
    clickHandle(){
        this.props.onchange()
    }
    render(){
    return(<View>
        <Button onClick={this.clickHandle}>調用上層事件</Button>
        {this.props.name}
        </View>)
    }
}
Child.defalutProps={
    name:"123",
    onchange
}
export default Child;
           

對上面代碼稍作修改：

Child.jsx

import React, { Component } from 'react'
import {View,Text,Button} from "@tarojs/components";

class Child extends React.Component{
    clickHandle(){
        this.props.onchange()
    }
    render(){
    return(<View>
        <Button onClick={this.clickHandle}>調用上層事件</Button>
        {this.props.name}
        </View>)
    }
}
Child.defalutProps={
    name:"123",
    onchange:null
}
export default Child;
           

注意下面框起來的部分：

調試成功：