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

组件中的props

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

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

函数组件-父传子

子组件.js
const FunCom = (props) => {
return (
<div>
<h2>我是函数组件</h2>
<p>我叫{ props.name}</p>
</div>
)
}
export default FunCom

页面使用
import React from 'react';
import ReactDOM from 'react-dom';
<!-- 引入 -->
import FunCom from  './components/FunCom'
ReactDOM.render(<FunCom name="李大为"/>, document.getElementById('root'))

类组件-父传子

子组件
import React from "react";
class FunCom extends React.Component{
render() {
return (
<div>
<h2>我是函数组件</h2>
<p>我叫{ this.props.name}</p>
</div>
)
}
}
export default FunCom

页面使用
import React from 'react';
import ReactDOM from 'react-dom';
<!-- 引入 -->
import FunCom from  './components/FunCom'
ReactDOM.render(<FunCom name="李大为"/>, 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(<FunCom name="李大为" age={19} fn={() => { console.log('我被出发了')}} tag={<h2>我是H2</h2>}  />,
document.getElementById('root'))

子组件
import React from "react";
class FunCom extends React.Component{
render() {
console.log(this.props)
return (
<div>
<h2>我是函数组件</h2>
<p>我叫{this.props.name}</p>
{ this.props.tag}
</div>
)
}
}
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 (
<div>
<p>我是函数组件</p>
<button onClick={this.giveFtaher}>给父组件</button>
</div>
)
}
}
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 (
<div>
<p>我是主页面</p>
<FunCom giveChildren={ this.getMsg}></FunCom>
</div>
)
}
}
ReactDOM.render(<PartentHello></PartentHello>,document.getElementById('root'))