React中組件的props和(父子,子父,兄弟)組件之間傳遞數據

React中組件的props和(父子,子父,兄弟)組件之間傳遞數據

1.組件的props

1.組件是封閉的,要接收外部數據應該通過props來實現;

2.props作用:接收傳遞給組件的數據;

3.傳遞數據:給組件標籤添加屬性;

4.接收數據:函數組件通過參數props接收數據,類組件通過this.props接收數據;

//函數組件chuan
<App name="zs" age={18} />
function App(props) {
	console.log(props)
	return (
		<div>接收到數據：{props.name}</div>
	)
}
//類組件
class App extends React.Component {
	render() {
		return (
			<div>接收到的數據：{this.props.age}</div>
		)
	}
}
<App name="zs" age={18} />

特點 :

1.可以給組件傳遞任意類型的數據;

2.props是隻讀屬性,只能讀取屬性的值,無法修改對象;

3.使用類組件時,如果寫了構造函數,應該將props傳遞給super(),否則無法在構造函數中獲取到props;

Class App extends React.Component{
    constructor(props) {
        //推薦給props傳遞構造函數
        super(props)
    }
    render() {
        return() {
            return <div>接收到的數據:{this.props.age} <div/>
        }
    }
}

2.組件之間的傳遞數據

2.1父組件傳遞數據給子組件

1.父組件提供要傳遞的state數據;

2.給子組件標籤添加屬性,值爲state中的數據;

3.子組件通過props接收組件中傳遞的數據;

//定義一個父組件
class Parent extends React.Component{
    state = {myName:'zs'}
	render() {
        return (
        	<div>
            	傳遞數據給子組件: <Child name={this.state.myName} />
            <div/>
        )
    }
}
//定義子組件
function Child(props) {
    //函數組件通過props獲取到父組件傳遞來的數據
    return <div> 子組件接收到數據:{props.name} <div/>
}

2.2子組件傳遞數據給父組件

1.利用回調函數,父組件提供回調,子組件調用,將要傳遞的數據作爲回調函數的參數;

2.父組件準備一個回調函數(用於接收數據);

3.將該函數作爲屬性的值,傳遞給子組件;

//父組件
class Parent extends React.Component {
    //父組件提供的函數
    getChildData = (data) => {
        console.log('接收到子組件的數據',data)
    }
    render() {
        return (
        	<div>
            	 {/* 把父組件定義的函數通過屬性(props)給子組件 */}
            	子組件: <Child getData = {this.getChildData} />
            <div/>
        )
    }
}
//子組件
class Child extends React.Component{
    state = {
        childData:'我是子組件中的數據'
    }
	
	//事件處理函數
	handleClick = ()=>{
        //類組件通過this.props獲取傳遞過來的函數,然後調用
        //然後把子組件中的數據通過參數傳遞給父組件
        this.props.getData(this.state.childData)
    }
	return (
    	<button onClick={this.handleClick}> 點擊按鈕給父組件傳遞數據<button/>
    )
}

2.3 兄弟組件之間的傳遞數據

1.將共享狀態提升到最近的公共父組件中,由公共父組件管理這個狀態;

2.公共父組件的職責:1.提供共享狀態,2.提供操作共享狀態的方法;

3.要通訊的子組件只需要通過props接收狀態或者操作狀態;

// 公共父組件
class Counter extends React.Component {
    // 提供共享狀態
    state = {
        count:0
    }

    // 提供修改狀態的方法
    onIncrement = () => {
        this.setState({
            count:this.state.count + 1
        })
        // console.log(this.state.count)
    }
    render() {
        return (
            <div>
                {/* 作爲參數由公共父組件傳遞過來 */}
                <Child1  count = {this.state.count} />
                {/* 子組件2調用公共修改狀態方法修改count的值,來改變子組件1中的數據 */}  
                <Child2 onIncrement={this.onIncrement}  />
            </div>
        )
    }
}

// 子組件1
const Child1 = props=>{
    //函數組件通過props獲取到數據
	return <h1>計數器:{props.count}</h1>
}

// 子組件2
const Child2 = props=>{
    //子組件2中調用公共父組件中的函數修改count數據,使count加1,子組件1中數據修改
    return <button onClick={()=>props.onIncrement()}>+1</button>
}