父组件向传子组件传递数据
先创建三个js文件，也就是三个组件
image.png
boss.js为最大的组件：
import React, {Component} from 'react';
import Dome from './dome'
class Boss extends Component {
render() {
return (
<div>
<h1>Boss</h1>
<Dome/>
</div>
);
}
}
export default Boss;
dome.js 为父组件：
我们在父组件中写需要向子组件传递的数据
import React, {Component} from 'react';
import Dome1 from './dome1'//把子组件引到父组建中
export default class Dome extends Component {
constructor() {
super();
this.state = {
aa:'小陈同学你好，我是父组件传递过来的数据'
}
}
render() {
return (
<div>
<h1>dome</h1>
<Dome1 bb={this.state.aa} />
</div>
);
}
}
B.js为父组件：
import React, {Component} from 'react';
export default class Dome1 extends Component {
constructor() {
super();
this.state = {
}
}
render() {
return (
<div>
<h1>dome1</h1>
{this.props.bb}
</div>
);
}
}
学习完了父传子，我们来看一下子传父
React_组建通信 — 子组件向传父组件传递数据
子组件向传父组件传递数据
我们先创建三个js文件，也就是三个组件
image.png
A 为最大的组件：
import React, {Component} from 'react';
import B from './B' //把父组件B.js引入进来
class A extends Component {
render() {
return (
<div>
<p>A</p>
<B/>
</div>
);
}
}
export default A;
C 为子组件：
我们在子组件中写需要向父组件传递的数据
import React, {Component} from 'react';
class C extends Component {
aa(){
this.props.cc('小陈最可爱')//使用this.props获得 子组件的props属性
}
render() {
return (
<div>
<p>C组件</p>
<button onClick={this.aa.bind(this)}>子组件向父组件传递数据</button>
</div>
);
}
}
export default C;
B.js为父组件：
import React, {Component} from 'react';
import C from './C' //把子组件引进来
class B extends Component {
bb(val){ //绑定一个处理函数 这个函数中的参数就是 子组件传递过来的数据
console.log(val)
}
render() {
return (
<div>
<p>B组件</p>
<C cc={this.bb.bind(this)}></C>
</div>
);
}
}
export default B;
最后页面上显示
image.png
控制台输出
image.png
