父組件向傳子組件傳遞數(shù)據(jù)
先創(chuàng)建三個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 為父組件：
我們在父組件中寫需要向子組件傳遞的數(shù)據(jù)
import React, {Component} from 'react';
import Dome1 from './dome1'//把子組件引到父組建中
export default class Dome extends Component {
constructor() {
super();
this.state = {
aa:'小陳同學(xué)你好吮播，我是父組件傳遞過來的數(shù)據(jù)'
}
}
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>
);
}
}
學(xué)習(xí)完了父傳子沸柔，我們來看一下子傳父
React_組建通信 — 子組件向傳父組件傳遞數(shù)據(jù)
子組件向傳父組件傳遞數(shù)據(jù)
我們先創(chuàng)建三個js文件，也就是三個組件
image.png
A 為最大的組件：
import React, {Component} from 'react';
import B from './B' //把父組件B.js引入進(jìn)來
class A extends Component {
render() {
return (
<div>
<p>A</p>
<B/>
</div>
);
}
}
export default A;
C 為子組件：
我們在子組件中寫需要向父組件傳遞的數(shù)據(jù)
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)}>子組件向父組件傳遞數(shù)據(jù)</button>
</div>
);
}
}
export default C;
B.js為父組件：
import React, {Component} from 'react';
import C from './C' //把子組件引進(jìn)來
class B extends Component {
bb(val){ //綁定一個處理函數(shù) 這個函數(shù)中的參數(shù)就是 子組件傳遞過來的數(shù)據(jù)
console.log(val)
}
render() {
return (
<div>
<p>B組件</p>
<C cc={this.bb.bind(this)}></C>
</div>
);
}
}
export default B;
最后頁面上顯示
image.png
控制臺輸出
image.png
