【React组件通讯的三种方式】

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


React组件之间的通讯分为三种:
  1. 父组件 →子组件
  2. 子组件 →父组件
  3. 兄弟组件

父组件传递数据给子组件

步骤:

  1. 父组件提供要传递的state数据
  2. 给子组件标签添加属性,值为state中的数据
  3. 子组件中通过props接收父组件中传递的数据
    项目演示:
    使用脚手架生成一个React项目: npx create-react-app ex-app
    运行项目:npm start
    目录结构如下:
    【React组件通讯的三种方式】,react.js,前端,前端框架
    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

  1. 父组件提供一个回调函数(用于接收数据)
  2. 将该函数作为属性的值,传递给子组件
  3. 子组件通过props调用回调函数
  4. 将子组件的数据作为参数传递给回调函数
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();

到了这里,关于【React组件通讯的三种方式】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue定义全局组件的三种方式

    第一种方式 1.1使用 Vue.extend 来创建全局的Vue组件 1.2使用 Vue.component(‘组件的名称’, 创建出来的组件模板对象) Vue.component 第一个参数:组件的名称,引用组件的时候,就是一个HTML 标签形式来引入的 第二个参数: Vue.extend 创建的组件 ,其中 template 就是组件将来要展示的HTML内容 1

    2024年02月07日
    浏览(50)
  • React三种通过属性传递组件本身的方法

    直接传递 JSX 创建好的元素 把要传递的组件作为 JSX 元素写在属性值里,然后在接收的组件里用 {this.props.xxx} 来渲染。这种方法的优点是直观和灵活,缺点是可能造成不必要的重复渲染。 直接传递 JSX 创建好的元素的方法会造成不必要的渲染,是因为每次父组件重新渲染时,

    2024年02月12日
    浏览(39)
  • 前端单点登录实现的三种方式

    1.同源不跨域 使用document.cookie或者localStorage可以直接存取 2.跨域主域名相同 可以使用cookie-js插件存储cookie,在设置cookie是添加domain参数,例如 Cookies.set(\\\'token\\\', 值, { expires: 60, path: \\\'\\\', domain: \\\'taobao.com\\\' }) 只有主域名相同,浏览器在访问时才会携带对应的 cookie 3.跨域 使用iframe内嵌

    2024年04月27日
    浏览(36)
  • 01_前端css编写的三种方式

    前言 CSS的引入方式共有三种:行内样式、内部样式表、外部样式表 用法: 在元素上直接通过style属性进行设置css样式设置 示例: 实际在写页面时不提倡使用,在测试的时候可以使用。 例如: 用法: 在style标签中书写CSS代码。style标签写在head标签中 例如: 用法: CSS代码保

    2024年02月09日
    浏览(41)
  • 前端终止请求的三种方式(ajax、axios)

    一、原生ajax终止请求 1、abort() ​ XMLHttpRequest.abort() 方法用于终止 XMLHttpRequest 对象的请求,该方法没有参数,也没有返回值。当调用该方法时,如果对应 XMLHttpRequest 对象的请求已经被发送并且正在处理中,则会中止该请求;如果请求已经完成(即已经接收到完整的响应),则

    2024年02月09日
    浏览(47)
  • React初体验-Hello React的组件化方式-React入门小案例

    接下来我们通过Hello React的案例, 来体验一下React开发模式, 以及jsx的语法 Hello React案例演练 第一步: 先引入React开发依赖 第二步: 这里我们编写React的script代码中,必须添加 type=\\\"text/babel\\\" ,作用是可以让babel解析jsx的语法 第三步: 创建元素渲染到页面 React18之前的做法: 通过 R

    2023年04月08日
    浏览(63)
  • React 组件通信方式

    人生的游戏不在于拿了一副好牌,而在于怎样去打好坏牌,世上没有常胜将军,勇于超越自我者才能得到最后的奖杯。 直接通过属性进行传递,数据的传递可以提高组件的复用性。 通过回调函数(callback)来实现。 ref 标记: 父组件拿到子组件的引用,从而调用子组件的方法

    2024年02月05日
    浏览(43)
  • 十分钟掌握前端获取实时数据的三种主流方式

    前端获取实时数据的三种主流方式 本文聊聊前端获取实时数据的三种主要方式。想象一下,我们在网上购物时,经常能看到最新的优惠信息弹出,或者在社交媒体上看到朋友的最新动态更新。这些都是因为后端在默默地向我们的页面推送了最新的消息。那么,这背后到底使用

    2024年02月21日
    浏览(48)
  • 【react从入门到精通】React父子组件通信方式详解(有示例)

    【分享几个国内免费可用的ChatGPT镜像】 【10几个类ChatGPT国内AI大模型】 【用《文心一言》1分钟写一篇博客简直yyds】 【用讯飞星火大模型1分钟写一个精美的PPT】 在上一篇文章《JSX详解》中我们了解了什么是jsx以及jsx的语法规则。 本文中我们将详细了解React父子组件通信方式

    2024年02月05日
    浏览(97)
  • 前端react入门day03-react获取dom与组件通信

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 受控表单绑定  React中获取DOM 组件通信 父传子  父传子-基础实现 父传子-props说明 父传子 - 特殊的prop children 子传父  使用状态提升实现兄弟组件通信 使用Context机制跨

    2024年02月01日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包