簡單的說一下父傳子(屬性傳值)
1.一般而言粱年,我們用的是ES6中的class類來書寫
import React, {Component} from 'react';
class Abc extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
</div>
);
}
}
export default Abc;
2.在父組件中
import React, {Component} from 'react';
import Abc from "../to/abc"; //---<引入子文件
class App extends Component {
constructor(props) {
super(props);
this.state={
aa:"hello react" //--->初始化
}
}
render() {
return (
<div>
<Abc cd={this.state.aa} ac="我是父組件給子組件傳的值"> </Abc>
</div>
);
}
}
export default App;
3.在子組件中(abc.js)
import React, {Component} from 'react';
class Abc extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<p>{this.props.ac}</p> //--->我是父組件給子組件傳的值
<p>{this.props.cd}</p> //--->hello react
</div>
);
}
}
export default Abc;
子組件給父組件傳遞值
1.要先在子組件中定義一個(gè)方法驼壶,通過方法的參數(shù),將值傳遞給父組件
import React, {Component} from 'react';
class Abc extends Component {
constructor(props) {
super(props);
}
tag(){
this.props.tag1("我是子組件傳遞給父組件的值");//--->tag1是父組件的變量名
}
render() {
return (
<div>
<p>{this.props.ac}</p>
<p>{this.props.cd}</p>
{/* bind是改變this的指向亿卤,也可以用箭頭函數(shù)改變*/}
<button onClick={this.tag.bind(this)}>點(diǎn)擊切換父組件的內(nèi)容</button>
</div>
);
}
}
export default Abc;
2.在父組件中
import React, {Component} from 'react';
import To from "../to/to";
import List from "../to/list";
import Abc from "../to/abc";
class App extends Component {
constructor(props) {
super(props);
this.state={
aa:"hello react"
}
}
ch(q){
alert(q);//--->q就是子組件傳遞過來的內(nèi)容
this.setState({aa:q});//--->在更新當(dāng)前的aa的內(nèi)容
}
render() {
return (
<div>
<Abc cd={this.state.aa} ac="我是父組件給子組件傳的值"
tag1={this.ch.bind(this)}> </Abc>
</div>
);
}
}
export default App;
兄弟傳值
就是把父傳子愤兵,子傳父結(jié)合到了一起,通過子組件(定義一個(gè)方法排吴,通過方法的參數(shù))秆乳,將值傳遞到父組件,在通過父組件(屬性傳值)钻哩,傳遞給另一個(gè)子組件
不過后面會(huì)有redux,react-redux傳值屹堰,會(huì)方便很多