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

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/qq_41956361/article/details/94389809

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

• 1.父组件给子组件传递属性
• 2.父组件给子组件传递方法

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

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