<!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. vue - 状态管理器 Vuex

    状态管理 vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性.

  2. day14 Python函数

    函数def,严格来讲有个return返回值 过程就是没有return返回值的函数 #过程 def test01(): msg = 'liuhaoran' print(msg) #函数 def test ...

  3. activemq5.14+zookeeper3.4.9实现高可用

    一.activeMQ主要的几类部署方式比较1.默认的单机部署(kahadb)activeMQ的默认存储的单机方式,以本地kahadb文件的方式存储,所以性能指标完全依赖本地磁盘IO,不能提供高可用. ...

  4. Redis漏洞，远程攻击

    文章转自http://blog.csdn.net/whs_321/article/details/51734602 http://blog.knownsec.com/2015/11/analysis- ...

  5. python编程入门之简介

    引用百度百科: Python是一种面向对象.直译式计算机程序设计语言,由荷兰人Guido van Rossum发明于1989年,1991年发行第一个公开发行版.它常被昵称为胶水语言,它能够很轻松的把用 ...

  6. 如何在Ubuntu18.04(Bionic Beaver)系统安装Teamviewer远程控制软件

    首先,打开TeamViewer的下载页面,下载Debian/Ubuntu的Deb安装包. 这里有64位和32位安装包选项.可以在Terminal(终端)中输入uname -a 查看自己系统版本是64位 ...

  7. <操作系统>内存管理

    单道程序设计:内存被划分为两部分:一部分供操作系统使用,另一部分供当前正在执行的程序使用. 多道程序设计:内存中进一步细分用户部分,以满足多个进程的要求. 内存管理的需求: 重定位:程序从磁盘换入内存 ...

  8. 项目Alpha冲刺 2

    作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 进行github实战训练,锻炼团队合作能力 1.团队信息 队名:火鸡堂 队员 ...

  9. linux公钥和私钥生成

    1. 路径 cd /root/.ssh 2. 输入命令 ssh-keygen -t rsa  按三次回车 3. 会依次生成  id_rsa 私钥和 id_rsa.pub 公钥 [root@insure ...

  10. saltstack学习之一：服务架构以及相关配置安装运行

    概要 saltstack是基于Python开发的C/S架构的一款批量管理工具,底层采用动态的连接总线(ZeroMQ消息队列pub/sub方式通信),使用ssl证书签发的方式进行认证管理,使其可以用于编 ...