<!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. WebApi连接数据库

    首先在web.config中加上语句连接语句: <connectionStrings> <add name="conn" connectionString=&qu ...

  2. Mybatis多参数及实体对象传递

    在使用Mybatis的时候,经常会有各种各样的参数传递,不同类型,不同个数的参数. 先上个例子:     public List<LifetouchRelease> findOfficeL ...

  3. 1.java内存区域与内存溢出异常

    1.java运行时数据区如图所示: 2.每个区域的功能 (1)程序计数器(寄存器) 当前线程所执行的字节码的行号指示器 为了线程切换后能够恢复到正确的执行位置,因此每个线程拥有自己独立的程序计数器 如 ...

  4. CF835 C 前缀和

    100*100规模上第一象限坐标系上有1e5规模的点,每个点随时间在同一个值域内(最大10)周期递增,但初始值不同,给出一个矩阵和时间询问此时范围内点的值的和. 预处理初始时刻不同权值下的二维前缀和, ...

  5. CF766 ABCDE

    LINK A 找最长非公共子序列..如果两串不是完全相同 显然就是最长的那个 /** @Date : 2017-04-15 19:52:34 * @FileName: 766A.cpp * @Plat ...

  6. Redhat安装配置VNC服务器

    1. 检查安装VNC服务器 # rpm -qa|grep vnc 如果返回信息中有tigervnc-server,说明已安装了VNC:如果没有: # yum install tigervnc # yu ...

  7. Dubbo 管理控制台安装

    Dubbo 管理控制台官网下载  https://github.com/alibaba/dubbo Dubbo 管控台可以对注册到 zookeeper 注册中心的服务或服务消费者进行管理,而且管控台是 ...

  8. Linux系统中各目录的作用

    /binbin是binary的缩写.这个目录沿袭了UNIX系统的结构,存放着使用者最经常使用的命令.例如cp.ls.cat,等等. /boot这里存放的是启动Linux时使用的一些核心文件. /dev ...

  9. Vue.js入门系列教程（一）

    基本的Vue代码结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  10. Liunx 下载文件夹下所有文件

    136down voteaccepted You may use this in shell: wget -r --no-parent http://abc.tamu.edu/projects/tzi ...