React props传变量
<!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传变量的更多相关文章
- js 实现vue—引入子组件props传参
参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...
- php 传变量到 js 文件
php 传变量到 js 文件 // 传变量到js $oncj="taocanonc(".$i.",".$alli.",".$row1[mon ...
- python笔记32-ddt框架优化(生成html报告注释内容传变量)
前言 至于什么是ddt这个可以参考我之前写的博客内容,使用ddt框架的时候,有个问题困扰我很久了,一直没得到解决(也有很大小伙伴问过我,没解决抱歉了!) 这个问题就是:如何使用ddt框架时,生成的ht ...
- vue 父子父组件通过props传父页面请求后的数据
父子父组件通过props传父页面请求后的数据,则在父页面的子组件上加上判断数据是否存在即可,如下 <gl-line-bar v-if="oneWeekBetEcharts" ...
- react~props和state的介绍与使用
props是参数的传递,从上层模块向下层模块进行拿传递:而state是提局域变量,一般在本模块内使用,props是不能改变的,而state可以通过setState去修改自身的值. props Reac ...
- react props与render成员函数
props是组件固有的属性集合,其数据由外部传入,一般在整个组件的生命周期中都是只读的,React的API顶层设计也决定了这一点.属性初值通常由React.createElement函数或者JSX中标 ...
- react组件传值传方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- react 路由传参
今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
随机推荐
- day10,11练习
1.执行Python脚本两种方式? 略 2.简述位.字节关系? 8位一个字节 3.简述ASCII,Unicode,utf-8,gbk关系? ascii unicode utf8 4.请写出李杰分别用u ...
- Linux系统学习之进程管理
什么是进程? 进程表示程序的一次执行过程,它是应用程序的运行实例,是一个动态的过程.或者可以更简单地描述为:进程是操作系统当前运行的程序.当一个进程开始运行时,就要启动了这个过程.进程包括动态的执行的 ...
- [转]Qt 之 QFileSystemWatcher
简述 QFileSystemWatcher类用于提供监视文件和目录修改的接口. QFileSystemWatcher通过监控指定路径的列表,监视文件系统中文件和目录的变更. 调用addPath()函数 ...
- Linux中进程与线程的概念以及区别
linux进程与线程的区别,早已成为IT界经常讨论但热度不减的话题.无论你是初级程序员,还是资深专家,都应该考虑过这个问题,只是层次角度不同罢了.对于一般的程序员,搞清楚二者的概念并在工作中学会运用是 ...
- 【ZOJ 3200】Police and Thief
ZOJ 3200 首先我写了个高斯消元,但是消出来了一些奇怪的东西,我就放弃了... 然后只好考虑dp:\(dp[i][j][k]\)表示走到了第i步,到了\((j,k)\)这个节点的概率. 那么答案 ...
- 学习CSS布局 - dispaly属性
"display"属性 display 是CSS中最重要的用于控制布局的属性. 每个元素都有一个默认的 display 值,这与元素的类型有关. 对于大多数元素它们的默认值通常是 ...
- Skyline从5.1升级版本到6.5的常见接口变化问题
1.原来Route对象升级成Presentation对象后,激活方法的变化: 原来5.1版本示例代码: function flyto(thisa) { var thisid = thisa.id; v ...
- Android Studio 导入工程
最简单的方式 等待加载完就好了 第二种方式 在导入别人的android studio项目(假设为项目A)时,会遇到gradle不一致的情况,以下简短介绍解决方法: 1. 打开要导入的项目的目录,删除下 ...
- python_第一章
从今天开始,正式开始学习python书籍:python 编程:从入门到实践. 感兴趣的读者可以去网上搜索这本书,适合读者入门,读下来,不会有任何 晦涩难懂的知识. 1.排序: 正排:sort() ...
- c# WPF 设置窗口一直在其中窗口后面/底层窗口
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...