React父子组件传递属性和方法

1.父组件给子组件传递属性

         (这是父组件的代码)

import React, { Component } from 'react'
import Home from './home'//这里引入子组件
import './App.css';

class App extends Component{
constructor(props){
  super(props);
  this.state={
    gae:'这是父组件的数据'
  }
}

render(){
  return(
 <Home arr={this.state.gae} ></Home>)组件化方式引用将数据通过该方式传递出去
}
}

export default App;

         (这是子组件的代码)

import React, { Component } from 'react'
export default class Home extends  Component{
    constructor(props){
        super(props);
        this.state={
          msg:'我是隔壁村的王大壮',
          pp:'这是子组件的数据'
        }
          }

render(){
    return(
        <div>
        {this.props.arr}//使用props接受父组件传递过来的数据
        </div>
    )
}
}

         (结果图)

---

2.父组件给子组件传递方法

        (  父组件代码 )

import React, { Component } from 'react'
import Home from './home'
import './App.css';

class App extends Component{
constructor(props){
  super(props);
  this.state={
    gae:'这是父组件的数据'
  }
}
fu(){
  alert('我是父组件的数据')
}
render(){
  return(
 <Home gat={this.fu}></Home>)
}
}

export default App;

        (  子组件代码 )

import React, { Component } from 'react'
export default class Home extends  Component{
    constructor(props){
        super(props);
        this.state={
          msg:'我是隔壁村的王大壮',
          pp:'这是子组件的数据'
        }
          }

render(){
    return(
        <div>
     <button onClick={this.props.gat}>获取父组件方法</button>
        </div>
    )
}
}

         (结果图)

---

个人github:https://github.com/webxingkong

如有不正确的地方请指教联系修改，后期将不断更新，谢谢你们的支持