<!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. ceph mimic版本 部署安装

    ceph 寻址过程 1. file --- object映射, 把file分割成N个相同的对象 2. object - PG 映射, 利用静态hash得到objectID的伪随机值,在 "位 ...

  2. spring的@Transaction使用注意

    文章参考资料 https://www.cnblogs.com/andy-zhou/p/5317866.html http://labreeze.iteye.com/blog/2277261 Sprin ...

  3. Multi-View Region Adaptive Multi-temporal DMM and RGB Action Recognition

    论文标题:Multi-View Region Adaptive Multi-temporal DMM and RGB Action Recognition 来源/作者机构情况: 解决问题/主要思想贡献 ...

  4. ASP 基础三 SQL指令

    一 增删改查 <% set conn=server.CreateObject("adodb.connection") DSNtemp="DRIVER={SQL Se ...

  5. curl命令行

    curl命令行--强大的工具.通过各种参数,支持各种方式. 写几个常用的命令: 请求到的网站html curl http://www.baidu.com 比如想在命令行上请求一个接口,post过去几个 ...

  6. 一篇自己都看不懂的CDQ分治&整体二分学习笔记

    作为一个永不咕咕咕的博主,我来更笔记辣qaq CDQ分治 CDQ分治的思想还是比较简单的.它的基本流程是: \(1.\)将所有修改操作和查询操作按照时间顺序并在一起,形成一段序列.显然,会影响查询操作 ...

  7. 解决微软surface pro在某些情况下wifi转输速度过慢的问题 - z

    我是新款i7 surface.昨天到的货,狗东. 在公司使用的时候网络很正常,但回到家里之后就特别卡.5G频段也特别卡,基本处于无法观看视频的地步.台式电脑(我台式用的无线网卡)和手机都没问题. 于是 ...

  8. CSS3选择器之:nth-child(n)

    第一次用到这个选择器还是为了解决下面了的问题: 手机的前端,我们使用了mint-ui,里面有一个日期选择控件,但是选择的时候没有提供年月的选择器,如: 而是提供了下面的方式: 为了达到上面的效果,使用 ...

  9. 11.11 开课二个月零七天（ajax和bootstrp做弹窗）

    1.用ajax做弹窗显示信息详情 nation.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  10. [开源 .NET 跨平台 Crawler 数据采集 爬虫框架: DotnetSpider] [三] 配置式爬虫

    [DotnetSpider 系列目录] 一.初衷与架构设计 二.基本使用 三.配置式爬虫 四.JSON数据解析与配置系统 五.如何做全站采集 上一篇介绍的基本的使用方式,自由度很高,但是编写的代码相对 ...