React组件间通信-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaoenwu/article/details/103619551

React 传参

一、父传子

		一 . 1 HTML页面（接下来的父传子、子传父、兄弟相传，都用此页面，并且class中的排版需要遵守JSX的语法格式）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app"/>
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

		一 . 2 先声明一个父组件，命名为Father

//引入react组件
import React from 'react';
//引入react-dom，页面渲染组件
import ReactDOM from 'react-dom';
//子组件class名为Son的组件
import Son from './Son';

//声明一个类让这个父类组件继承React.Component的属性
class Father extends React.Componenet{
	constructor(){
		//继承
		super();
		//声明class类的“state”专属属性,等于一个对象
		this.state={
					name:"小红",
					age:20,
					sex:"gril"
					}
	}
	//每一个类中必须有render方法，用作页面排版
	render(){
		//return返回最外层只能是一个标签
		return (
			//最外层只能有一个元素标签，如果不想页面有过多的无用标签，可以用
			//<React.Fragment></React.Fragment> 
			<React.Fragment>
				//实例化Son,通过属性进行传值给子组件Son。
				<Son name={this.state.name} />
				<p>年龄：{this.state.age}</p>
			</React.Fragment>
			);
			}
}

//获取目标元素渲染DOM
ReactDom.render(<Father />,document.querySelector("#root"))

一 . 3 声明一个子组件class名为Son

//引入react组件
import React from 'react';
//声明一个子组件名为Son2
class Son extends React.Component{
	render(){
	return(
		<React.Fragment>
			<h1>名字是：{this.props.name}</h1>
		</React.Fragment>
	);
	}
}
//向外暴露自己
export default Son;

二、子传父

二 . 1 声明一个父组件，class名为Father

//引入react组件
import React from 'react';
//引入react-dom，页面渲染组件
import ReactDOM from 'react-dom';
//子组件class名为Son2的组件
import Son2 from './Son2';

//声明一个类让这个父类组件继承React.Component的属性
class Father extends React.Componenet{
	//
	constructor(){
		super();
		this.state={
			message:""
		}
	}
	//声明一个函数在组件中不用function关键字直接写函数名
	//就可以，用来接收子组件向父组件传的参数
	getSonMess(msg){
			//修改this.state.message的数据
			this.setState({
					message:msg
				})
		}
	
	render(){
		return (
			<React.Fragment>
				//通过绑定使getSonMess函数中的this指向class对象,调用this.state属性
				<Son2 mess={this.getSonMess.bond(this)} />
				<p>这是从子组件传过来的：{this.state.message}</p>
			</React.Fragment>
		);
		}
}

//获取目标元素渲染DOM
ReactDom.render(<Father />,document.querySelector("#root"))

二 . 2 声明一个子组件

	import React from 'react';

	class Son2 extends React.Component{
		
		//声明一个函数用来传参
		addFatherMess(){
			this.props.mess("你好");
		}
		render(){
			return (
				<React.Fragment>
					<button onClick={this.addFatherMess.bind(this)}>点击此按钮把数据传到父组件</botton>
				</React.Fragment>
				);
			}
		}
		//向外暴露自己
		export default Son2;

三、兄弟相传

  先把Son组件的数据拿到，然后给Father父组件，再通过Father父组件把数据传给Son2子组件。这样就形成了兄弟相传

三 . 1 声明一个父组件

//引入react组件
import React from 'react';
//引入react-dom，页面渲染组件
import ReactDOM from 'react-dom';
//引入子组件class名为Son的组件
import Son from './Son';
//引入子组件class名为Son2的组件
import Son2 from './Son2';

//声明一个类让这个父类组件继承React.Component的属性
class Father extends React.Componenet{
	constructor(){
		//继承
		super();
		//声明class类的“state”专属属性,等于一个对象
		this.state={
					message:""
					}
	}

	//声明一个函数用作接收Son的参数
		getSonMess(msg){
			this.setState({
					message:msg
				})
			}
	//每一个类中必须有render方法，用作页面排版
	render(){
		//return返回最外层只能是一个标签
		return (
			//最外层只能有一个元素标签，如果不想页面有过多的无用标签，可以用
			//<React.Fragment></React.Fragment> 
			<React.Fragment>
				
				<h1>这是Son组件</h1>
				//实例化Son,把数组通过getSonMess函数,把
				//this.setState.message值修改为获取的值
				<Son name={this.getSonMess.bind(this)} />
				<hr>
				<h1>这是Son2组件</h1>
				//实例化Son2 把this.state.message的数据传给Son2
				<p>这是Son2的数据：<Son2 data={this.state.message} /></p>
			</React.Fragment>
			);
			}
}

//获取目标元素渲染DOM
ReactDom.render(<Father />,document.querySelector("#root"))

三 . 2 声明一个子组件Son

	import React from 'react';

	//声明子组件Son
	class Son extends React.Component{
		
		addFatherMess(){
			this.props.mess("这是Son组件生成的数据。。。。")
			}
			render(){
				return(
					<React.Fragment>
						<button onClick={this.addFatherMess.bind(this)}>点击此按钮把数据传到Son2组件</button>
					</React.Fragment>
					);
				}
	}
	//向外暴露
export default Son ;

三 . 3 再声明一个子组件Son2

import React from 'react';

class Son2 extends React.Component{

	render(){
		return (
			<React.Fragment>
				{this.props.data}
			</React.Fragment>
			);
		}
}
//向外暴露
export default Son2;