组件之间的传值

组件的数据

一般组件是放置在
components文件夹下的,components是在page的下面的文件.

这个是组件的数据

import Taro, { Component } from 'react'//首先因为我们要使用taro所有我们要导入它
import { View, Text } from '@tarojs/components'//因为我们要使用这些标签所有我们要导入
export default class header extends Component {
    // 必须要有一个render
    render() {
        // 如何取props 这边是取在使用组件传递过来的数据
        // 我们可以this.props.title来取到值
        // console.log(this.props.title)
        const  {title} =this.props;
        
        // 变成类名的使用
        const headerCls=`${title}-header`
        return (<View className={headerCls}>
            <Text>好的哈大家啊点击</Text>
        <Text>{title}</Text>
        {/* 这个是直接引入 */}
        </View>)
    }
}

这个是需要使用组件内容的页面

import Taro, { Component } from 'react'
import { View, Text } from '@tarojs/components'
import './index.scss'
import Header from  '../components/header'//这边是找到组件的路径地址
//组件命名的值是header
export default class Index extends Component {
  componentWillMount () { }
  componentDidMount () { }
  componentWillUnmount () { }
  componentDidShow () { }
  componentDidHide () { }
  render () {   
    return (
      <View className='index'>
        {/* 这个title的内容相当于props  要把这个数据传到组件当中 */}
        <Header title="balabalabala"></Header>
        <Text>0 2121</Text>
      </View>
    )
  }
}