<!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. IDEA里面添加lombok插件,编写简略风格Java代码(转)

    文章转自http://blog.csdn.net/hinstenyhisoka/article/details/50468271 在 java平台上,lombok 提供了简单的注解的形式来帮助我们消除 ...

  2. yarn出现“There are no scenarios ; must have at least one"

    错误信息:“There are no scenarios ; must have at least one" 背景:在将vscode自动化构建编译打包时出现这种情况,主要是执行yarn这一步 ...

  3. sparse 稀疏函数的用法

    sparse函数 功能:创建稀疏矩阵 用法1:S=sparse(X)—将矩阵X转化为稀疏矩阵的形式,即矩阵X中任何零元素去除,非零元素及其下标(索引)组成矩阵S. 如果X本身是稀疏的,sparse(X ...

  4. 使用Nginx来解决跨域的问题

    使用Nginx来解决跨域的问题 nginx的版本:(查看nginx命令: /usr/local/nginx/sbin/nginx -v) nginx/1.4.3 问题是:前端项目域名是 a.xxxx. ...

  5. vue 实现tab切换动态加载不同的组件

    vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...

  6. PAT A1122 Hamiltonian Cycle （25 分）——图遍历

    The "Hamilton cycle problem" is to find a simple cycle that contains every vertex in a gra ...

  7. python基础学习第四天

    #字符串到数字 可以进行各种进制转换#print(int('11111',8)) #需求 对字符串中的单词翻转 保留空格#第一种方法 最笨clstr='I love you!'bam=clstr.sp ...

  8. SkylineGlobe 6.6 版本API更新

    TEPro6.6API更新 概述 API6.6 较6.5只做了微小的更新,您可以很容易的将6.5的应用程序移植为6.6版本的应用程序. C#环境中,修改步骤如下: 创建SGWorld66实例代替SGW ...

  9. [04] JSP标准动作

    1.概述 JSP规范中定义了一系列的标准动作,Web容器按照规范进行了实现,可以解析并执行标准动作.而标准动作使用的是标准的xml语法,看上去也比较直观易懂,下面来看一个结构例子: <jsp:a ...

  10. Lua 中的条件表达式

    下面这代码段看上去很熟悉,就是C#里面的条件表达式,很多其它语言也都有这么一个条件表达式. ; ; string c = "c"; string d = "d" ...