Taro小程序父组件给子组件传不了值

Question

taro写的父组件传递给子组件值，但是子组件打印出来的this.props === {},既没有传递值到给子组件。

父组件

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtTabBar } from 'taro-ui'

// import './index.less'
import Mall from './mall/index'
import Home from './home/index'
import Moment from './moment/index'
import Me from './me/index'

export default class Index extends Component {

  config = {
    navigationBarTitleText: '蜗居',
  }

  constructor(){
    super()
    this.state = {
      current: 0,
      pages: {
        home: true,
        mall: false,
        moment: false,
        me: false
      }
    }
  }

  handleClick(currentTabIndex){
    let newPages = this.state.pages
    switch (currentTabIndex) { // 为了一些严重拖性能的页面按需加载，一般的页面就不需要销毁了
      case 0:
        if (this.state.pages.home){
          this.setState({
            current: currentTabIndex
          })
        } else {
          newPages.home = true
          newPages.mall = false
          this.setState({
            current: currentTabIndex,
            pages: newPages
          })
        }
        break
      case 1:
        if (this.state.pages.mall){
          this.setState({
            current: currentTabIndex
          })
        } else {
          newPages.mall = true
          this.setState({
            current: currentTabIndex,
            pages: newPages
          })
        }
        break
      case 2:
        if (this.state.pages.moment){
          this.setState({
            current: currentTabIndex
          })
        } else {
          newPages.moment = true
          newPages.mall = false
          this.setState({
            current: currentTabIndex,
            pages: newPages
          })
        }
        break
      case 3:
        if (this.state.pages.me){
          this.setState({
            current: currentTabIndex
          })
        } else {
          newPages.me = true
          newPages.mall = false
          this.setState({
            current: currentTabIndex,
            pages: newPages
          })
        }
        break
    }
  }

  render () {
    const home = (<Home handleClick={this.handleClick.bind(this)} hh='kk'/>)
    const mall = (<Mall />)
    const moment = (<Moment />)
    const me = (<Me />)
    return (
      <View>
        <View hidden={this.state.current != 0} className='tab-container'>
          {this.state.pages.home ? home : ''}
        </View>
        <View hidden={this.state.current != 1} className='tab-container'>
          {this.state.pages.mall ? mall : ''}
        </View>
        <View hidden={this.state.current != 2} className='tab-container'>
          {this.state.pages.moment ? moment : ''}
        </View>
        <View hidden={this.state.current != 3} className='tab-container'>
          {this.state.pages.me ? me : ''}
        </View>
        <AtTabBar
          fixed
          tabList={[
            { title: '首页', iconType: 'home'},
            { title: '商城', iconType: 'shopping-bag'},
            { title: '社区', iconType: 'message' },
            { title: '我的', iconType: 'user'}
          ]}
          onClick={this.handleClick.bind(this)}
          current={this.state.current}
          selectedColor='#2db7b5'
        />
      </View>
    )
  }
}

子组件

componentDidMount = e => {
    console.log(this.props)
  }

打印的截图：

Answer 1

你要在自组件打印，或者使用props中的值，才可以打印出来，要不然一直都是{}

• 比如：

• 结果：

• 如果我在子组件不使用list

• 结果：

Answer 2

遇到了同样的问题，请问楼主解决了吗？

Answer 3

方法是可以的，但是有一点要注意
props字段的命名，不可以跟data的字段名字有重复！！！！切记！

Answer 4

子组件要声明一下

export default class 子组件 extends Component {
  static defaultProps = {
    list: []
  };