<!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. Mongodb 备份 还原 导出 导入 等批量操作

    mongodb数据备份和还原主要分为二种,一种是针对于库的mongodump和mongorestore,一种是针对库中表的mongoexport和mongoimport. 一,mongodump备份数 ...

  2. hbase性能调优案例

    hbase性能调优案例 1.人员-角色   人员有多个角色  角色优先级   角色有多个人员   人员 删除添加角色   角色 可以添加删除人员   人员 角色 删除添加   设计思路 person表 ...

  3. 30款基于 jQuery & CSS3 的加载动画和进度条插件

    我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...

  4. JavaScript定义类的几种方式

    提起面向对象我们就能想到类,对象,封装,继承,多态.在<javaScript高级程序设计>(人民邮电出版社,曹力.张欣译.英文名字是:Professional JavaScript for ...

  5. sylk文件

    症状:excel表出现提示:sylk文件...导致excel表不可读取 原因:文件内容有“ ID ” 字段,估计是固定的识别“ID”或“ID_XXXX” 修改方法:将ID中的任意字母换成小写即可 转载 ...

  6. win10环境变量

    jdk8 JAVA_HOME D:\devsoft\jdk\jdk1.8 CLASSPATH .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar pa ...

  7. javascript中的数组去重

    1.方法一:双层循环,外层循环元素,内层循环做比较,若相同则跳过,不同则加入结果集中,获取没重复的最右侧的值放入数组中 Array.prototype.distinct = function(){ v ...

  8. Struts结果跳转方式(四种result配置)

    1.转发(默认转发)

  9. STL hashtable阅读记录

    unordered_map,unordered_set等相关内容总结: unordered_map和unordered_set是在开发过程中常见的stl数据结构.其本质是hashtable.在SGI_ ...

  10. [SVN技巧]代码提交中遇到的两个问题及其解决方案

    前言 SVN在使用的过程中会遇到各种各样的问题,小黑在最近的使用中,遇到如下的两个问题,这里贴出来供大家参考 问题记录 SVN在源码仓库中不存在,导致无法删除和上传 问题提示: Working cop ...