<!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. day10,11练习

    1.执行Python脚本两种方式? 略 2.简述位.字节关系? 8位一个字节 3.简述ASCII,Unicode,utf-8,gbk关系? ascii unicode utf8 4.请写出李杰分别用u ...

  2. Linux系统学习之进程管理

    什么是进程? 进程表示程序的一次执行过程,它是应用程序的运行实例,是一个动态的过程.或者可以更简单地描述为:进程是操作系统当前运行的程序.当一个进程开始运行时,就要启动了这个过程.进程包括动态的执行的 ...

  3. [转]Qt 之 QFileSystemWatcher

    简述 QFileSystemWatcher类用于提供监视文件和目录修改的接口. QFileSystemWatcher通过监控指定路径的列表,监视文件系统中文件和目录的变更. 调用addPath()函数 ...

  4. Linux中进程与线程的概念以及区别

    linux进程与线程的区别,早已成为IT界经常讨论但热度不减的话题.无论你是初级程序员,还是资深专家,都应该考虑过这个问题,只是层次角度不同罢了.对于一般的程序员,搞清楚二者的概念并在工作中学会运用是 ...

  5. 【ZOJ 3200】Police and Thief

    ZOJ 3200 首先我写了个高斯消元,但是消出来了一些奇怪的东西,我就放弃了... 然后只好考虑dp:\(dp[i][j][k]\)表示走到了第i步,到了\((j,k)\)这个节点的概率. 那么答案 ...

  6. 学习CSS布局 - dispaly属性

    "display"属性 display 是CSS中最重要的用于控制布局的属性. 每个元素都有一个默认的 display 值,这与元素的类型有关. 对于大多数元素它们的默认值通常是  ...

  7. Skyline从5.1升级版本到6.5的常见接口变化问题

    1.原来Route对象升级成Presentation对象后,激活方法的变化: 原来5.1版本示例代码: function flyto(thisa) { var thisid = thisa.id; v ...

  8. Android Studio 导入工程

    最简单的方式 等待加载完就好了 第二种方式 在导入别人的android studio项目(假设为项目A)时,会遇到gradle不一致的情况,以下简短介绍解决方法: 1. 打开要导入的项目的目录,删除下 ...

  9. python_第一章

    从今天开始,正式开始学习python书籍:python 编程:从入门到实践. 感兴趣的读者可以去网上搜索这本书,适合读者入门,读下来,不会有任何 晦涩难懂的知识. 1.排序: 正排:sort()    ...

  10. c# WPF 设置窗口一直在其中窗口后面/底层窗口

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...