<!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. JVM调优总结（5）：典型配置

    以下配置主要针对分代垃圾回收算法而言. 堆大小设置 年轻代的设置很关键 JVM中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理 ...

  2. JavaScript arguments你不知道的秘密

    (function test(x){ x=10; console.log(arguments[0], x); //undefined, 10 })(); (function test(x){ x=10 ...

  3. 《Troubleshooting SQL Server》读书笔记-CPU使用率过高（上）

    第三章 High CPU Utilization. CPU使用率过高问题很容易被发现,但是诊断却不是很容易.CPU使用过高很多时候会成为其它问题的替罪羊,所以在确认和故障诊断时要抽丝剥茧. 调查CPU ...

  4. 用Vue来实现图片上传多种方式

    没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element ...

  5. 按键精灵MySql数据库操作

    查询 MySql服务器地址="192.168.1.166" 用户名 = "root" 密码 = " 数据库名="bookshop" ...

  6. 福建工程学院寒假作业第一周G题

    涨姿势题1 TimeLimit:1000MS  MemoryLimit:128000KB 64-bit integer IO format:%lld   涨姿势题就是所谓的优化题,在组队赛中,队伍发现 ...

  7. python算法之近似熵、互近似熵算法

    理论基础 近似熵? 定义:近似熵是一个随机复杂度,反应序列相邻的m个点所连成折线段的模式的互相近似的概率与由m+1个点所连成的折线段的模式相互近似的概率之差. 作用:用来描述复杂系统的不规则性,越是不 ...

  8. SurfaceFlinger 讲解

    SurfaceFlinger是Android multimedia的一个部分,在Android 的实现中它是一个service,提供系统 范围内的surface composer功能,它能够将各种应用 ...

  9. puppet practice

    目标 试验环境有两台主机(VM)构成,一台是master,一台是agent,完成以下工作: 新建用户newuser; 安装 ubuntu-cloud-keyring package,更改文件/etc/ ...

  10. 004_Gradle 笔记——Java构建入门

    Gradle是一个通用的构建工具,通过它的构建脚本你可以构建任何你想要实现的东西,不过前提是你需要先写好构建脚本的代码.而大部分的项目,它 们的构建流程基本是一样的,我们不必为每一个工程都编写它的构建 ...