<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
/* function Son(props){
return(
<div>
<p>你好啊</p>
{props.parname}
</div>
)
}; */
class Son extends React.Component{
constructor(props){
super(props);
};
 
componentDidMount(){
this.callback()
}
callback(){
console.log(this.props)
}
render(){
 
return(
<div>
<button onClick={()=>this.props.show('bai')}>你好啊</button>
<button onClick={()=>this.callback()}>yellow</button>
{this.props.parname}
</div>
)
}
}
//如果这里要用onClick={this.callback}的话，它的就会报错很多时候()=>see()表示一个函数
class App extends React.Component{
constructor(props){
super(props)
this.state={
name:'lishishi'
}
}
hand(e){
this.setState({
name:e
})
 
}
render(){
let name='lishishi';
return(
<div>
<p>66666</p>
<Son parname={this.state.name} show={(e)=>this.hand(e)} />
</div>
)
}
}
window.onload=function(){
let titl =document.getElementById("div1");
ReactDOM.render(
<App/>,
titl
)
}
//document.getElementById()
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>

react子传父的更多相关文章

  1. vue 组件之间相互传值 父传子 子传父

    1.父传子 把要传入的值放到父标签里  子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...

  2. Vue父子组件传值 | 父传子 | 子传父

    父传子 父容器 <template> <div> <zdy :module='test'></zdy> </div> </templa ...

  3. Vue ---- 组价 组件化 子传父 父传子

    目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...

  4. vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

    首先文字简单撸一下 父子传子   -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父   ------在父组件升上自定义一个方法,在子组件里通过this ...

  5. vue子传父、父传子

    子传父 vue子传父使用$emit传值 子组件: <template> <div> <button @click="toParent">点击传到 ...

  6. Vue-组件传值：子传父和兄弟组件间常见的传值方式

    前言 上篇介绍了我对vue组件化的理解和父组件对子组件传值的方式,这篇介绍下常见的子传父和兄弟组件间的传值方式 目录 子组件向父组件传值 任意组件间的传值方式 正文 子组件向父组件传值 关键知识点:$ ...

  7. vue传参子传父

    vue子传父用$emit实现 1.文件目录结构 2.parent父组件内容 <template> <div class="wrap"> <div> ...

  8. Blazor和Vue对比学习（基础1.4）：事件和子传父

    Blazor和Vue的组件事件,都使用事件订阅者模式.相对于上一章的组件属性,需要多绕一个弯,无论Blazor还是Vue,都是入门的第一个难点.要突破这个难点,一是要熟悉事件订阅模式<其实不难& ...

  9. React组件介绍与使用（父传子、子传父、兄弟传）

    1.创建组件的方法     1.1.函数式无状态组件 1.1.1.语法 1 function myComponent(props) { 2 return 3 <div>Hello {pro ...

随机推荐

  1. 使用 Docker 镜像构建 GO 语言环境

    1. 安装 Docker 我当前使用的系统环境是 CentOS7 ,安装 Docker 使用的命令是 yum install docker*.至于其它系统,可以到百度查找其对应的安装方式. 2. 配置 ...

  2. IoC之AutoFac（二）——解析服务

    阅读目录 一 Resolve方法 二 TryResolve和ResolveOptional方法 三 解析服务时传参 3.1 可用参数类型 3.2 带反射组件的参数 3.3 具有Lambda表达式组件的 ...

  3. c#中@标志的作用 C#通过序列化实现深表复制 细说并发编程-TPL 大数据量下DataTable To List效率对比 【转载】C#工具类：实现文件操作File的工具类 异步多线程 Async .net 多线程 Thread ThreadPool Task .Net 反射学习

    c#中@标志的作用   参考微软官方文档-特殊字符@,地址 https://docs.microsoft.com/zh-cn/dotnet/csharp/language-reference/toke ...

  4. Unity应用架构设计(7)——IoC工厂理念先行

    一谈到 『IoC』,有经验的程序员马上会联想到控制反转,将创建对象的责任反转给工厂.IoC是依赖注入 『DI』 的核心,大名鼎鼎的Spring框架就是一个非常卓越的的控制反转.依赖注入框架.遗憾的是, ...

  5. 用.NET开发的磁力搜索引擎——btbook.net

    UPDATE:目前项目已停止维护,本文仅留作纪念. 去年10月份开始研究相关的协议与资料,中途乱七八糟的事情差点没坚持下来,寒假里修修补补上礼拜把Btbook发布了,经过社交网络的推广之后,上线第三天 ...

  6. Atitit.如何文章写好 论文 文章 如何写好论文 技术博客

    Atitit.如何文章写好 论文  文章  如何写好论文 技术博客 1. 原则 1 1.1. 有深度, 有广度 1 1.2. 业务通用性有通用性 尽可能向上抽象一俩层..业务通用性与语言通用性. 2 ...

  7. SQL自动流水号函数

    CREATE FUNCTION [dbo].[f_NextBH]() ) AS BEGIN ), ),),),) FROM Shop WITH(XLOCK,PAGLOCK)) END

  8. curl模拟访问已经存在的cookie

    curl 'http://i.meituan.com/brunch/order?status=2' -H 'Pragma: no-cache' -H 'Accept-Encoding: gzip, d ...

  9. vue2.0引入现有css文件

    1.在vue文件中的<style>内填写需要引用的文件 如: @import "./css/indexTest.css";

  10. jQuery左侧图片右侧文字滑动切换代码

    分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div cla ...