<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_componment_basic</title>
</head>
<body>
<div id="example1"></div>
<div id="example2"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
    //一、.定义组件
    //方式1:工厂函数组件(简单组件)
    function MyComponent() {
        return <h2>工厂函数组件(简单组件)</h2>
    }

    //方式2:es6类组件(复杂组件)(通过创建MyComponent2的实例调用render方法)
    class MyComponent2 extends React.Component {
        render() {
            console.log(this);
            return <h2>es6类组件(复杂组件)</h2>
        }
    }

    //二、渲染组件标签
    ReactDOM.render(<MyComponent/>, document.getElementById('example1'));
    ReactDOM.render(<MyComponent2/>, document.getElementById('example2'));
</script>
</body>
</html>

07_组件三大属性(1)_state的更多相关文章

  1. React组件三大属性之 refs

    React组件三大属性之 refs refs属性 1) 组件内的标签都可以定义ref属性来标识自己 a. <input type="text" ref={input => ...

  2. React组件三大属性之 props

    React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...

  3. React组件三大属性之state

    React组件三大属性之state 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示 理解1) state是组件对象最重要的属性, 值是对象(可以包含多个数 ...

  4. 08_组件三大属性(2)_props

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. 09_组件三大属性(3)_refs和事件处理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 组件的三大属性state，props，refs与事件处理

    组件的三大属性state state是组件对象最重要的属性, 值是对象(可以包含多个数据),组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 初 ...

  7. React 三大属性state,props,refs以及组件嵌套的应用

    React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...

  8. React组件的属性

    组件的三大属性 state props refs 写组件的要求: 1>组件必须大写 2>组件必须只有一个根元素 state是组件的重要对象 值可以是对象 组件被称之为 状态机 通过跟新组件 ...

  9. vue-learning：29 - component - 组件三大API之三：slot

    组件三大API之三: slot <slot>标签 v-slot指令 普通插槽 有默认值的插槽 具名插槽 作用域插槽 v-slot是Vue 2.6.0引入的一个新语法指令,目的是统一之前sl ...

随机推荐

  1. 用R语言实现对不平衡数据的四种处理方法

    https://www.weixin765.com/doc/gmlxlfqf.html 在对不平衡的分类数据集进行建模时,机器学**算法可能并不稳定,其预测结果甚至可能是有偏的,而预测精度此时也变得带 ...

  2. Python pip源处理

    pypi 镜像使用帮助 pypi 镜像每 5 分钟同步一次. 临时使用 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple some-pac ...

  3. 运用PowerDesigner的反向工程，可以导入SQL脚本，从而生成物理模型

    运用PowerDesigner的反向工程,可以导入SQL脚本,从而生成物理模型.方法/步骤 首先打开PowerDesigner,点击左上角“File”—>"Reverse Engine ...

  4. 在 Element-UI 的 Table 组件上添加列拖拽效果

    Element-UI 的 Table组件很强大,但是我们的需求更强大... 简单粗暴的来一发效果图: 一.数据驱动 传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup ...

  5. android studio AIDL 编译时 错误：找不到符号

    原贴路径:http://blog.csdn.net/baidu_30164869/article/details/51036405 PS:在android studio中 当将java文件放到aidl ...

  6. CVE-2017-8570漏洞利用

    CVE-2017-8570漏洞是一个逻辑漏洞,利用方法简单,影响范围广.由于该漏洞和三年前的SandWorm(沙虫)漏洞非常类似,因此我们称之为“沙虫”二代漏洞. 编号 CVE-2017-8570 影 ...

  7. mac一些设置

    Mac自带了的JDK6,安装在目录:/System/Library/Java/JavaVirtualMachines/1.6.0.jdk/下. JDK8则需要自己到Oracle官网下载安装对应的版本. ...

  8. HBase分布式集群部署与设计

    先是把cdh版本的hbase上传上来 把安装吧的权限设置一下 解压 把没用的东西干掉 hbase的官网 配置文件 到hbase-site.xml 下面我不基于HA配置了 把hbase分发到其他两个节点 ...

  9. mysql存储过程的编写

    1.MySQL 新增存储过程,因为mysql默认以:为分隔符,该分隔符会使mysql自动执行sql语句,故需要将分隔符修改下,下面通过DELIMITER设为$$,然后编写SQL,编写完成再将:设为分隔 ...

  10. MVC字符串转json,ajax接受json返回值

    #region 功能 /// <summary> /// 查询 微信用户一定年月的账单 /// </summary> /// <param name="year ...