<!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. activemq5.14+zookeeper3.4.9实现高可用

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

  3. git fork之如何同步更新

    1.打开git fork的开源项目(这里我以git fork vscode为例): 2.点击New pull request 3.选择你自己的 4.选择完后出现如图 5.调整状态,右边改为源fork地 ...

  4. ubuntu apt-get 出现NO_PUBKEY的解决方案

    https://blog.csdn.net/u014221090/article/details/77524682

  5. PAT A1076 Forwards on Weibo （30 分）——图的bfs

    Weibo is known as the Chinese version of Twitter. One user on Weibo may have many followers, and may ...

  6. docker被入侵后.............

    服务器上线后,怎么发现总有个 xmrig 的容器在跑,删了还出来 那么恭喜你!!你的服务器已经被入侵了!! $ docker ps IMAGE               COMMAND       ...

  7. Photoshop 基础二 快捷键

    1.取消选区:Ctrl + D 2.反选: Shift + F7 3.复位调板:窗口-工作区-复位调板位置 4.图像的缩放: Ctrl.+.- 5.用前景色填充:Ctrl + Delete 6.用背景 ...

  8. C. K-Dominant Character

    给出一个字母串,k满足:长度至少为k的字串一定包含某字母c,求最小的k 一个数组记录每个字母上一次出现的位置,用来计算另一个数组:记录每个字母与其相邻的相同字母的最大距离(设0和len两个位置一定有相 ...

  9. GIT 工作区和暂存区

    工作区和暂存区 Git和其他版本控制系统如SVN的一个不同之处就是有暂存区的概念. 先来看名词解释. 工作区(Working Directory) 就是你在电脑里能看到的目录,比如我的studygit ...

  10. A2dp连接流程源码分析

    在上一篇文章中,我们已经分析了:a2dp初始化流程 这篇文章主要分析a2dp的连接流程,其中还是涉及到一些底层的profile以及protocol,SDP.AVDTP以及L2CAP等. 当蓝牙设备与主 ...