React_组件间传递参数、父—子、子—父、父—孙、兄弟

谁借莪１个温暖的怀抱￠ 2022-10-13 05:08 185阅读 0赞

# 父—子 #

# 子—父 #

//父组件
    class Main extends React.Component{ 
    	constructor(props){ 
    		super();
    		this.state = { 
    			age:50,
    		}
    	}
    	handleParent(check){ 
    		console.log(check);
    		this.setState({ age:check})
    	}
    	render(){ 
    		return (
    			<div>
    				<p>我是父组件 age:{ this.state.age}</p>
    				{ /* 传递回调函数handleParent接受子组件参数，注意：绑定this */}
    				<Check handleParent={ this.handleParent.bind(this)} { ...this.state} />	
    			</div>
    		)
    	}
    }
    //子组件
    class Check extends React.Component{ 
    	constructor(props){ 
    		super();
    		this.state = { 
    			age:10
    		}
    	}
    	onChange(e){ 
    		this.setState({ age:e.target.value})
    		//调用父组件回调函数handleParent传递当前值
    		this.props.handleParent(e.target.value)
    	}
    	render(){ 
    		return (
    			<div>
    				<p>我是子组件 age:{ this.state.age}</p>
    				<input type="text" value={ this.props.age} onChange={ (event)=>this.onChange(event)} />	
    			</div>
    		)
    	}
    }

# 父—孙 #

//父组件
    class Main extends React.Component{ 
    	constructor(props){ 
    		super();
    		this.state = { 
    			age:50,
    		}
    	}
    	render(){ 
    		return (
    			<div>
    				{ /* 传递参数age给子组件 */}
    				<Check age={ this.state.age} />	
    			</div>
    		)
    	}
    }
    //子组件
    class Check extends React.Component{ 
    	render(){ 
    		return (
    			<div>
    				{ /* 传递接收到父组件传的的age直接传递给当前组件的子组件 */}
    				<List age={ this.props.age} />
    			</div>
    		)
    	}
    }
    //孙组件
    class List extends React.Component{ 
    	render(){ 
    		return (
    			<div>
    				<p>接收age:{ this.props.age}</p>
    			</div>
    		)
    	}
    }

# 兄弟 #

使用（父—子）和（子—父）结合完成