前端学习(2309):react之同级传值

Home,js

import React, {Component} from 'react';
import News from "./News";
class Home extends Component {constructor(props) {super(props);this.state={text:'我是默认值'}}dataFun=(text)=>{console.log(text)this.setState({text})}render() {return (<div>home---<p>{this.state.text}</p><News name="你好" fufun={this.dataFun}/></div>);}
}export default Home;

news,js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import PubSub from 'pubsub.js'
class News extends Component {constructor(props) {super(props);this.state={num:1111,ziText:"我是子组件的值"}}fun(){this.setState({num:222})}pubsubb(){console.log(1)PubSub.publish("evt",this.state.num)console.log(1)}render() {return (<div>News-----{this.props.name}-----{this.state.num}<button onClick={this.fun.bind(this)}>哈哈</button><button onClick={this.props.fufun.bind(this,this.state.ziText)}>发送</button><button onClick={this.pubsubb.bind(this)}>点我进行同级传值</button></div>);}
}News.propTypes = {};export default News;

app.js

import React from 'react';import './App.css';
import  Home from './components/Home.js'
function App() {return (<div className="App">你好<Home></Home></div>);
}export default App;

phone.js

import React, {Component} from 'react';
import PubSub from 'pubsub.js'
class Phone extends Component {constructor(props) {super(props);PubSub.subscribe("evt",(msg,data)=>{console.log("phone"+data)})}render() {return (<div>phone</div>);}
}export default Phone;

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/417185.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ie6/7 position relative overflow

ie6/7父容器overflow:auto;子容器position:relative;时子容器下面超出的部分会显示在父容器的外边。解决办法&#xff1a;父容器也加position:relative

linux基于域的虚拟目录,RHELAS4.0 apache配置之我的小结(虚拟目录,虚拟主机)

说明一下几个基本的Listen 80ServerName localhost:80ServerAdmin rootlocalhostServerRoot /etc/httpd #apache运行所在目录DirectoryRoot /var/www/htmlOptions FollowSymLinksAllowOrride NoneOrder allow,denyAllow from all#在httpd.conf上打上这些是不能启动apache的&…

11.SolrJ索引操作

创建索引 说明&#xff1a;根据id&#xff08;唯一约束&#xff09;域来更新Document的内容&#xff0c;如果根据id值搜索不到id域则会执行添加操作&#xff0c;如果找到则更新。 public void testCreateIndex() throws SolrServerException, IOException { SolrServer solrSer…

common lisp 学习第四天 变量、宏

//变量//引入变量&#xff1a;变量作用域括号内(let ((x 10) (y 20) z)...)引入变量列表中的变量(let* ((x 10) (y ( x 10))...)//全局变量之前有没有值都可以赋值(defparameter *count*变量名0值"doc描述")变量未定以才可以赋值&#xff0c;也可以不给定值(defvar *…

前端学习(2310):数据请求和json-server

app.js import React from react;import ./App.css; import Home from ./components/Home.js import World from "./components/World"; function App() {return (<div className"App">你好<World/></div>); }export default App;worl…

对Linux课程内容的建议,Linux课程笔记 Day01 课程内容总结(示例代码)

系统安装&#xff1a;引导项简单介绍&#xff1a;在“boot:”提示后&#xff1a;直接回车(Enter)——图形界面安装模式linux text——字符界面安装模式linux askmethod——提示用户选择安装方法(例如&#xff1a;nfs、ftp、http远程安装)linux rescue——救援模式&#xff0c;…

CommonJs、AMD、CMD模块化规范

/*** CommonJS 模块化规范* CommonJS规范加载模块是同步的&#xff0c;也就是说&#xff0c;只有加载完成&#xff0c;才能执行后面的操作*//*-------Node.js遵循Commonjs规范---------*///写法1.var exportsmodule.exports;exports.name"leyi";exports.fnfunction()…

前端学习(2311):react中处理跨域问题

proxy:{"/api":{target:"http://www.weather.com.cn/data/cityinfo/101320101.html",changeOrigin:true,"pathRewrite":{"^/api":"/"}}}

mysql显示行号

显示行号set intIndex 0;select (intIndex : intIndex 1) as RowNum ,* from table;

linux密码stdin怎么用,如何使ssh接收来自stdin的密码

根据这篇文章&#xff0c;您可以执行以下操作&#xff1a;创建一个使用SSH_ASKPASS打开ssh会话的命令(在man ssh上查找SSH_ASKPASS )$ cat > ssh_session <export SSH_ASKPASS"/path/to/script_returning_pass"setsid ssh "your_user""your_hos…

Dev Express Report 学习总结(五)在分组中使用聚集表达式AggregateExpression

聚集表达式AggregateExpression主要包括几种&#xff1a;Avg(),Count(),Exists(),Max(),Min(),Single()和Sum()。其中对于Sum()&#xff0c;在我看来主要有两种用法&#xff0c;一种是Group时的合计&#xff0c;另一种是整个页面某个列的值的合计。但是对于Count(),由于以前对D…

RavenDb中的Task异步应用.Net4

internal partial class RavenService : ServiceBase{ private RavenDbServer server; private Task startTask; public RavenService() { InitializeComponent(); } protected override void OnStart(string[] args) { //单独开启一个线程启动服务 startTask Task.Factory…

linux 线程间传送消息,Linux 多线程同步-消息队列

消息队列是消息的链表&#xff0c;存放在内核中并有消息队列标示符标示。msgget用于创建一个新队列或打开一个现存的队列。msgsnd将新消息加入到消息队列中&#xff1b;每个消息包括一个long型的type&#xff1b;和消息缓存&#xff1b;msgrcv用于从队列中取出消息&#xff1b;…

RTF文件格式

RTF1.8白皮书 http://www.microsoft.com/downloads/details.aspx?FamilyIDac57de32-17f0-4b46-9e4e-467ef9bc5540&displaylangen //标签 name为自定义标签名称{\*\bkmkstart name} //文本头部\rtf1RTF版本\ansi字符集\ansicpg936简体中文//字体表{\fonttbl{\f0字体0\fmode…

linux6.8安装图形桌面,图形/文本界面安装CentOS 6.8系统详解

2. anaconda的工作过程前面提到&#xff0c;使用anaconda安装CentOS系统有两种方式&#xff0c;默认使用的是图形界面(GUI)安装&#xff0c;要求主机内存至少有512MB内存。而使用基于文本配置接口(TUI)来安装CentOS则需要显示指定&#xff0c;指定方式可以是在菜单界面按ESC键&…

C#位图算法

在处理表格合并等问题时&#xff0c;可以考虑采用位图算法实现二维存储对象的处理通过Map.Set设置点值或Map.Fill填充区域。判断各点值时通过Map.Get获取扩展Point属性可以改成3维或更多维实现多维存储对象的处理/// <summary>/// 二维图形算法/// 王洪岐 121226/// <…

从零开始学JavaWeb

引言 记得上学时,有位导师说过一句很经典的话:"编程语言只是工具,最重要的是掌握思想。" 笔者一直主要从事.net领域的开发工作。随着工作阅历的丰富&#xff0c;越来越深刻的理解当年导师说的那句话的意义。 "他山之石,可以攻玉",相互借鉴,然后为我所用,无…

嵌入式linux截屏代码,嵌入式linux截屏程序

基于网上一个代码改的。源地址&#xff1a;http://blog.csdn.net/z1179675084/article/details/14645359// 注意&#xff0c;由于fb_bpp 16的情况没用到&#xff0c;以下修改后的代码只调整了fb_bpp不为16的情况#include #include #include #include #include #include #inclu…

MongoDB分布式(分片存储)部署

分别开启一个Config和两个ShardD:\mongodb1\bin\mongod --configsvr --dbpath D:\mongodb1\db\ --port 27020D:\mongodb2\bin\mongod --dbpath D:\mongodb2\db\ --port 27021D:\mongodb3\bin\mongod --dbpath D:\mongodb3\db\ --port 27022启动mongos(Sharding controller分片控…