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'))