<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/react.js"></script>
  <script src="js/react-dom.js"></script>
  <script src="js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">
  var LabelComponent = React.createClass({
    render:function(){
      return <label>{this.props.labelName}</label>
    }
  })

  var InputComponent = React.createClass({
    render:function(){
      return <input type="text" placeholder={this.props.tips}/>
    }
  })

  var ButtonComponent = React.createClass({
    render:function(){
      return <button>{this.props.buttonName}</button>
    }
  })

  var LoginWindow = React.createClass({
    render:function(){
      return <div>
      <LabelComponent labelName='用户名'/>
      <InputComponent tips='请输入用户名'/>
      <br/>
      <LabelComponent labelName='密码'/>
      <InputComponent tips='请输入密码'/>
      <br/>
      <ButtonComponent buttonName='注册'></ButtonComponent>
      <ButtonComponent buttonName='登录'></ButtonComponent>
      </div>
    }
  })

  ReactDOM.render(
  <LoginWindow/>,
  document.getElementById('example')
  )

</script>

</body>
</html>

React props传变量的更多相关文章

  1. js 实现vue—引入子组件props传参

    参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...

  2. php 传变量到 js 文件

    php 传变量到 js 文件 // 传变量到js $oncj="taocanonc(".$i.",".$alli.",".$row1[mon ...

  3. python笔记32-ddt框架优化(生成html报告注释内容传变量)

    前言 至于什么是ddt这个可以参考我之前写的博客内容,使用ddt框架的时候,有个问题困扰我很久了,一直没得到解决(也有很大小伙伴问过我,没解决抱歉了!) 这个问题就是:如何使用ddt框架时,生成的ht ...

  4. vue 父子父组件通过props传父页面请求后的数据

    父子父组件通过props传父页面请求后的数据,则在父页面的子组件上加上判断数据是否存在即可,如下 <gl-line-bar v-if="oneWeekBetEcharts" ...

  5. react~props和state的介绍与使用

    props是参数的传递,从上层模块向下层模块进行拿传递:而state是提局域变量,一般在本模块内使用,props是不能改变的,而state可以通过setState去修改自身的值. props Reac ...

  6. react props与render成员函数

    props是组件固有的属性集合,其数据由外部传入,一般在整个组件的生命周期中都是只读的,React的API顶层设计也决定了这一点.属性初值通常由React.createElement函数或者JSX中标 ...

  7. react组件传值传方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. react 路由传参

    今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...

  9. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

随机推荐

  1. 【JDK和Open JDK】平常使用的JDK和Open JDK有什么区别（转）

    文章转自https://www.cnblogs.com/sxdcgaq8080/p/7487369.html 注意到这个问题,是在CentOS7上安装JDK的时候,查找相关的资料,发现安装JDK之前都 ...

  2. NSTimer深入理解

    NSTimer,即计时器,用于定时执行一些任务,一次或者多次. 系统Foundation框架提供的最常用方法如下,创建一个NSTimer,并将它放到当前runloop的default mode中. + ...

  3. Linux命令——df/du/time

    一.df(disk free) df命令可以用来检查 linux服务器的文件系统的磁盘空间占用情况,可以知道硬盘被占用了多少空间,目前还剩下多少空间等信息. 1)命令格式 df [参数] 文件名 2) ...

  4. android精品开源项目整理

    转载地址:http://www.eoeandroid.com/thread-311366-1-1.html 前言:无论你是android的初学者,还有是Android开发了好多年的高手,可能都会有很多 ...

  5. 洛谷 P1396 营救

    题目链接 https://www.luogu.org/problemnew/show/P1396 题目描述 “咚咚咚……”“查水表!”原来是查水表来了,现在哪里找这么热心上门的查表员啊!小明感动的热泪 ...

  6. TerraExplorer Add-ons 和TEZ使用说明

    1.    概述 Skyline提供了丰富的API,用户可以根据不同实际需求,进行二次开发封装,实现各种功能的扩展和定制.当我们开发了各种功能页面或者应用程序后,如何将它们快速嵌入到TerraExpl ...

  7. Java8中的HashMap分析

    本篇文章是网上多篇文章的精华的总结,结合自己看源代码的一些感悟,其中线程安全性和性能测试部分并未做实践测试,直接是“拿来”网上的博客的. 哈希表概述 哈希表本质上一个数组,数组中每一个元素称为一个箱子 ...

  8. Linux/CentOS下安装MySql RPM Bundle

    一.下载对应的版本的MySql安装文件 1.下载路径 https://dev.mysql.com/downloads/mysql/ 2.选择对应的Linux版本和x86/x64位的安装文件 查看Lin ...

  9. Ubuntu 打包后安装提示：子进程 已安装 pre-removal 脚本 返回了错误号 1

    子进程 已安装 pre-removal 脚本 返回了错误号 1或2 与 子进程 已安装 post-installation 脚本 返回了错误号 1或2   一.子进程 已安装 pre-removal  ...

  10. 渐进式 JavaScript 框架--Vue

      前  言   灵活 不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩. 高效 20kB min+gzip 运行大小超快虚拟 DOM 最省心的优化 1 计算属性 计算属性关键词: comp ...