1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>菜鸟教程 React 实例</title>
  6. <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  7. <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  8. <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  9. </head>
  10. <body>
  11.  
  12. <div id="example"></div>
  13. <script type="text/babel">
  14. function HelloMessage(props) {
  15.     return <h1>Hello {props.name} {props.name1}!</h1>;
  16. }
  17.  
  18. const element = <HelloMessage name="Zzw LearningReact"  name1="unHappy"/>;
  19.  
  20. ReactDOM.render(
  21.     element,
  22.     document.getElementById('example')
  23. );
  24. </script>
  25.  
  26. </body>
  27. </html>

react篇章-React 组件-向组件传递参数的更多相关文章

  1. react浏览器回退按钮的时候传递参数

    本来是有这个需求的,但是后来发现回退不也是到某个页面吗?接下来就使用了redux,真香啊,不管用户怎么操作,你到这个界面都给他一个值就完事了,没有就不给他这个值. 哈哈哈,公司框架使用umi.上代码 ...

  2. react篇章-React Props

    state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.这就是为什么有些容器组件需要定义 state 来更新和修改数据. 而子组件只能通过 pro ...

  3. react篇章-React State(状态)-组件都是真正隔离的

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  4. react篇章-React 组件-复合组件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  5. react篇章-React 组件-ES6 class 来定义一个组件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  6. React篇章-React 组件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  7. react篇章-React Props-Props 验证

    React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库. <script src="https://cdn.bootcss.com/pr ...

  8. react篇章-React State(状态)-数据自顶向下流动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  9. react篇章-React State(状态)-将生命周期方法添加到类中

    将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要. 每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载. ...

随机推荐

  1. TestNG指南

    转载自:http://blog.csdn.net/bigapplestar/article/details/7300137 今天突然收到通知,统一改用TestNG写测试用例,开始查这方面的资料,学习一 ...

  2. Arrays.asList方法遇到的问题

    在使用Arrays.asList(T...a)方法时,遇到了 java.lang.UnsupportedOperationException  异常. 后来发现,该方法返回的类型是Arrays$Arr ...

  3. 实用技巧：如何用 CSS 做到完全垂直居中

    本文将教你一个很有用的技巧——如何使用 CSS 做到完全的垂直居中.我们都知道 margin:0 auto; 的样式能让元素水平居中,而 margin: auto; 却不能做到垂直居中……直到现在.但 ...

  4. 支付宝Android接口4.0以上报错Failure calling remote service

    很坑爹的问题,4.0一下没问题,完全按照接口文件写的.网上一查,很多人遇到.最好直接在4.2下调试,看看报错问题,然后度娘. 将RSA文件中的加上“BC”后测试通过...NND PKCS8Encode ...

  5. 基本控件文档-UITextField属性---iOS-Apple苹果官方文档翻译

    本系列所有开发文档翻译链接地址:iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址 //转载请注明出处--本文永久链接:http://www.cnblogs.com/Ch ...

  6. 【洛谷 P3191】 [HNOI2007]紧急疏散EVACUATE（二分答案，最大流）

    题目链接 sb错误调了3hour+.. bfs预处理出每个\(.\)到每个\(D\)的最短距离. 二分时间\(t\),把每个\(D\)拆成\(t\)个点,这\(t\)个点两两连边,流量\(INF\)表 ...

  7. C语言实现线性表(链式存储方式)

    #include <stdio.h> #include <stdlib.h> //提供malloc()原型 typedef struct LNode *List; typede ...

  8. Vue笔记之模板语法

    插值 比较常用的就是插值,插值就是{{ foobar }}用两个大括号包起来的一个变量,显示的时候会将双大括号标签替换为这个变量的值. 基本的用法就是: <p>{{ message }}& ...

  9. 图片异或(xor)getflag

    题目地址:https://files.cnblogs.com/files/nul1/flag_enc.png.tar 这题是源于:网鼎杯minified 经过测试隧道红色最低通道异常.其余均正常.所以 ...

  10. openjudge-NOI 2.6-2988 计算字符串距离

    题目链接:http://noi.openjudge.cn/ch0206/2988/ 题解: 首先,题目有误,少了一个添加操作 和求解LCS之类的思路类似 f[i][j]表示a序列中1..i的部分和b序 ...