011 create-react-app 组件之间的数据传递

el/2024/3/25 17:30:08

子组件给父组件传值

创建一个news组件,在news组件里对父组件进行传值

import react, { component } from 'react'
export default class news extends component {constructor(props) {super(props);this.state = {id: "子组件news"};};render() {return (

011 create-尊龙官方平台

)} }

创建home组件,引用子组件,并创建homesub函数,将homesub函数传给子组件,用于接收子组件发来的数据

import react, { component } from 'react'
import news from './news'
export default class home extends component {constructor(props) {super(props);this.state = {id: "父组件home"};};homesub = (value) => {console.log(`news组件给home组件传值内容:${value}`)}render() {return (
)} }

如下图所示,父组件成功的接收到了子组件的数据

同级组件之间传值

首先安装pubsub-js

npm i pubsub-js

在news组件里用pubsub设置传递事件,与传递的值

import react, { component } from 'react'
import pubsub from "pubsub-js"
export default class news extends component {pubsub() {//事件名为:tophone,传值为:你有新消息了pubsub.publish("tophone", "你有新消息了");}render() {return (
)} }

在phone组件里用pubsub监听tophone事件

import react, { component } from 'react'
import pubsub from "pubsub-js"
export default class phone extends component {constructor(props) {super(props);//监听tophone事件pubsub.subscribe("tophone", (msg, data) => {console.log(`来自于news的消息:${data},监听事件:${msg}`)});}render() {return (

我是phone组件

)} }

在home里将news和phone同时使用(让他俩成为同级标签)

import react, { component } from 'react'
import news from './news'
import phone from './phone'export default class home extends component {render() {return (
)} }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


http://www.ngui.cc/el/5127277.html

相关文章

造轮子-短网址算法

短网址原理解析,当我们在浏览器里输入 http://t.cn/rlb2pdd 时: dns首先解析获得 http://t.cn 的 ip 地址 当 dns 获得 ip 地址以后(比如:74.125.225.72),会向这个地址发送 http get 请求,查询…

造轮子-html标签清理

这个是我去年处理rss订阅源时写的小玩意,基于jsoup、正则完成的,有两种实现,看你想用哪一种,如果觉得对你有帮助,请点个赞吧。 htmltagclearuptool.java package org.wuancake.common.util;/*** 过滤html字符串的标签…

解决inner join、left join、right join效率慢

场景:当使用关联查询(inner 、left、right join)等进行查询时候,关联条件都已建立索引,但查看执行计划发现并未走索引。 原因:两表字段的字符集不相同导致关联查询索引失效 尊龙官方平台的解决方案,三选一&a…

012 axios请求

先安装json-server(模拟数据用的,貌似我用不到)和axios(数据请求) npm i json-server -g npm i --save axios简单的get请求: import react, { component } from react import axios from "axios&quo…

013 react.js路由-browserrouter模式

路由是根据uri的不同来切换对应的组件,实现spa(单页面应用),在页面切换的时候不会刷新,更加接近原生体验。 先来安装路由的组件,下载哪个都行 npm i --save react-router-dom #功能更全 npm i --save rea…

015 路由的高阶组件-withrouter

什么是高阶组件(hoc): 入参是一个组件,同时返回的也是一个组件,这类组件被称为高阶组件 withrouter让不具备路由切换功能的组件,能够具有路由切换组件的三个属性 location、match、history withrouter监…

016 hock的使用

hock是react 16.7的新特新,可以让无状态组件能够使用状态,在react开发中状态的管理是必不可少的,以前为了进行状态管理,需要使用类组件或者redux等进行管理。 usestate是用来定义状态,他返回的是一个数组,第…

017 redux统一管理state

redux是js提供的一个可预测性的状态容器,集中度管理react中多个组件的状态。redux是专门的一个状态管理库,不是react独有的。 什么的可预测性:我们给一个固定的输入,那么必定可以得到一个结果 redux的适用场景: 1. …

shiro内置realm——jdbcrealm

jdbcrealm需要引入数据库驱动和数据源 mysqlmysql-connector-java8.0.14 com.alibaba

mysql group by被限制的问题

当我们编写查询sql使用group by,还查询了其他字段时,会提示group by限制的问题,如图所示: 错误代码: 1055 expression #2 of select list is not in group by clause and contains nonaggregated column qrcode.store_…
网站地图