【React组件通讯的三种方式】-Toy模板网

这篇具有很好参考价值的文章主要介绍了【React组件通讯的三种方式】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

React组件之间的通讯分为三种：

父组件 →子组件
子组件 →父组件
兄弟组件

父组件传递数据给子组件

步骤：

父组件提供要传递的state数据
给子组件标签添加属性，值为state中的数据
子组件中通过props接收父组件中传递的数据
项目演示：
使用脚手架生成一个React项目： npx create-react-app ex-app
运行项目：npm start
目录结构如下：

index.js中的代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// 父传子
// 父组件
class Parent extends React.Component {
	state = {
		lastName: '王'
	}
	render() {
		return ( <
			div className = "parent" >
			父组件:
			<
			Child name = {
				this.state.lastName
			}
			/> <
			/div>
		)
	}
}

const Child = (props) => {
	console.log(props);
	return ( <
		div className = "child" >
		<
		p > 子组件， 接收到父组件的数据： {
			props.name
		} < /p> <
		/div>
	)
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( <
	Parent / >
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

子组件传递数据给父组件

思路：利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。文章来源地址https://www.toymoban.com/news/detail-527432.html

父组件提供一个回调函数（用于接收数据）
将该函数作为属性的值，传递给子组件
子组件通过props调用回调函数
将子组件的数据作为参数传递给回调函数

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';

// 父组件
class Parent extends React.Component{
	state = {
		parentMsg:""
	}
	// 提供回调函数，用来接收数据
	getChildMsg = (data)=>{
		console.log('接收到子组件中传递过来的数据',data);
		this.setState({
			parentMsg:data
		})
	}
	render(){
		return(
		<div className="parent">
		父组件:{this.state.parentMsg}
		<Child getMsg = {this.getChildMsg}/>
		</div>
		)
	}
}

// 子组件
class Child extends React.Component{
	state = {
		msg:'刷抖音'
	}
	handleClick = ()=>{
		// 子组件调用父组件传递过来的回调函数
		this.props.getMsg(this.state.msg)
	}
	render(){
		return(
		<div className="child">
		子组件:<button onClick={this.handleClick}>点我,给父组件传递数据</button>
		</div>
		)
	}
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<Parent />
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

兄弟组件

将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态
思想：状态提升
公共父组件职责：1.提供共享状态 2.提供操作共享状态的方法
要通讯的子组件只需通过props接收状态或操作状态的方法

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';

// 兄弟组件
// 父组件
class Counter extends React.Component{
	state = {
		count:0
	}
	// 提供修改状态的方法
	onIncrement = ()=>{
		this.setState({
			count:this.state.count + 1
		})
	}
	render(){
		return(
		<div>
		<Child1 count = {this.state.count}/>
		<Child2 onIncrement = {this.onIncrement}/>
		</div>
		)
	}
}

const Child1 = (props)=>{
	return <h1>计数器:{props.count}</h1>
}
const Child2 = (props)=>{
	return <button onClick={()=>props.onIncrement()}>+1</button>
}


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<Counter />
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();