React中组件之间相互传值

父组件给子组件传值，通过属性的方式传值

子组件如果是类

import React, { Component } from 'react';

// 1.类子组件
class ChildCpn1 extends Component {
  constructor(props) {
    super();
    this.props = props;
  }

  render() {
    const { name, age, height } = this.props;

    return (
      

        
我是class的组件
        
展示父组件传递过来的数据: {name + " " + age + " " + height}
      
    )
  }
}

export default class App extends Component {
  render() {
    return (
      

        
      
    )
  }
}

子组件如果是函数

function ChildCpn2(props){
  const {name,age,height} = props;
  return (
    

      
function组件哈
      
展示父组件传递过来的数据:{name + " "+ age+ " "+height}
    
  )
}

参数验证，需要导入

import PropTypes from 'prop-types';

用法如下

ChildCpn1.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  height: PropTypes.number
}

 某个属性必须的设置用法如下

requiredFunc: PropTypes.func.isRequired

设置属性的默认值为如下用法

ChildCpn1.defaultProps = {
  name: "王小波",
  age: 40,
  height: 1.92
}

子组件传递父组件

 在Vue中是通过自定义事件来完成的，但是在React中同样是通过props传递信息，只是让父组件给子组件传递一个回调函数，子组件中调用这个回调函数即可。

function CounterButton(props){
   const {operate,btnClick} = props;
   return {operate}
}

export default class ParentButton extends Component {
  constructor(props){
    super(props)
    this.state = {
      counter: 0
    }
  }

  changeCounter(count){
    this.setState({
      counter: this.state.counter+count
    })
  }

  render(){
    return (
      

        
子组件向父组件传值的操作:{this.state.counter}
      this.changeCounter(1)}>
      this.changeCounter(-1)}> 
      
      

  )

  }

}




function ChildCpn2(props){
  const {name,age,height} = props;
  return (
    

      
function组件哈
      
展示子组件传递过来的数据:{name + " "+ age+ " "+height}
    
  )
}