React数据通信父传子和子传父的使用

组件中的props

在react中，props的特点是：
1.可以给组件传递任意类型的数据
2.props是只读的对象，只能够读取属性的值，无法修改对象
如过我们强行修改数据，会报错，告诉我们该属性是只读属性。

ps:在类组件中，如果写了构造函数，应该将props传递给super().
否则无法在构造函数中获取到props

函数组件-父传子

子组件.js
const FunCom = (props) => { 
    return (
        

            
我是函数组件
            
我叫{ props.name}
        
    )
}
export default FunCom

页面使用
import React from 'react';
import ReactDOM from 'react-dom'; 

import FunCom from  './components/FunCom'
ReactDOM.render(, document.getElementById('root'))

类组件-父传子

子组件
import React from "react";
class FunCom extends React.Component{
    render() { 
        return (
            

                
我是函数组件
                
我叫{ this.props.name}
            
        )
    }
}
export default FunCom

页面使用
import React from 'react';
import ReactDOM from 'react-dom'; 

import FunCom from  './components/FunCom'
ReactDOM.render(, document.getElementById('root'))

函数组件与类组件接收参数的区别

函数组件接受参数直接是：props.xxx
类组件接受参数直接是： this.props.xxx

组件可以传递那些值？

可以传递：可以传递数字， xxx={19}
html,函数等等....
详细代码如下

父组件
import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
import FunCom from './components/FunCom'

ReactDOM.render( { console.log('我被出发了')}} tag={
我是H2
}  />,
  document.getElementById('root'))

子组件
import React from "react";
class FunCom extends React.Component{
    render() { 
        console.log(this.props)
        return (
            

                
我是函数组件
                
我叫{this.props.name}
                { this.props.tag}
            
        )
    }
}
export default FunCom

子组件传递数据父组件

1.父组件提供一个回调函数(用于接受数据)
2.将该函数作为属性的值，传递给子组件

儿子组件
import React from "react";
class FunCom extends React.Component{
    state = {
        msg:'儿子给父亲的数据'
    }

    // 将数据传递给父组件
    giveFtaher = () => { 
        this.props.giveChildren(this.state.msg)
    }
    render() { 
        return (
            

                
我是函数组件
                给父组件
            
        )
    }
}
export default FunCom

父组件
import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
import FunCom from './components/FunCom'


class PartentHello extends React.Component {
  // 当点击按钮的收，子组件会触发这个方法
  getMsg = (data) => {
    console.log('接收到子组件的数据',data)
  }

  render() { 
    return (
      

        
我是主页面
        
      
    )
  }
}
ReactDOM.render(,document.getElementById('root'))