<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>菜鸟教程 React 实例</title>

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>

<body>

<div id="example"></div>

<script type="text/babel">

function HelloMessage(props) {

    return <h1>Hello {props.name} {props.name1}!</h1>;

}

const element = <HelloMessage name="Zzw LearningReact"  name1="unHappy"/>;

ReactDOM.render(

    element,

    document.getElementById('example')

);

</script>

</body>

</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. input模拟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. vue-router路由原理

    Vue-router路由原理 目前实现路由的方式有两中,vue通过参数mode来设置,默认是hash模式. 利用URL中的hash(‘#’)来实现 利用History interface在HTML5中 ...

  3. centos7 ffmpeg安装

    #Nux Dextop库依赖于EPEL库,所有要先安装EPEL库yum -y install epel-release #安装Nux Dextop库rpm -Uvh http://li.nux.ro/ ...

  4. UVA 1390 Interconnect

    https://vjudge.net/problem/UVA-1390 题意: 给出n个点m条边的无向图, 每次随机加一条非自环的边,(加完后可出现重边), 添加每条边的概率是相等的 求使图连通的期望 ...

  5. NOIP 2015 提高组 Day2

    期望得分:100+10+60=170 实际得分:100+10+35=145 http://www.cogs.pro/cogs/page/page.php?aid=16 T1 跳石头 时间限制:1 s  ...

  6. JavaScrip入门笔记（二）

    使用JS完成表格的隔行换色 新标签的学习 <thead> <tr> <th></th> </tr> </thead> <t ...

  7. elasticsearch ik中文分词器的安装配置使用

    安装步骤  https://github.com/medcl/elasticsearch-analysis-ik 以插件形式安装: [elsearch@localhost elasticsearch- ...

  8. 使用Forms Authentication

    using System; using System.Web; using System.Web.Security;   namespace AuthTest {   public class Aut ...

  9. 洛谷 1.5.1 Number Triangles 数字金字塔

    Description 考虑在下面被显示的数字金字塔. 写一个程序来计算从最高点开始在底部任意处结束的路径经过数字的和的最大. 每一步可以走到左下方的点也可以到达右下方的点. 7 3 8 8 1 0 ...

  10. 微信小程序迁移到头条小程序工具

    最近公司需要将微信小程序迁移到头条小程序,比较得知微信和头条小程序的写法类似,只有文件名称不同,相关的指令不同,以及头条在ttml绑定的数据不可使用function,于是就写了node脚本来实现这些重 ...