<!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. 信息安全-加密：RSA 算法

    ylbtech-信息安全-加密:RSA 算法 RSA公开密钥密码体制.所谓的公开密钥密码体制就是使用不同的加密密钥与解密密钥,是一种“由已知加密密钥推导出解密密钥在计算上是不可行的”密码体制. 1.返 ...

  2. Notepad++ 列操作

    在网上找到一篇关于socket编程的文章,想把其中的代码直接拷贝下来运行测试,但是人家网站做的不够人性化,每行的开头都有行号,直接拷贝就要一行行的删除,甚是麻烦,想到linux下的vi编辑器可以完成列 ...

  3. Jmeter（三十八）Jmeter Question 之 ‘批量执行SQL语句’

    知识使我们变得玩世不恭,智慧使我们变得冷酷无情,我们思考的太多,感知太少,除了机器,我们更需要人性,除了智慧,我们需要仁慈和善良. ------出自查理卓别林的演讲 前面有提到Jmeter使用JDBC ...

  4. [UE4]GameplayAbilities，技能系统插件

    Unreal Engine 4(虚幻UE4)GameplayAbilities 插件入门教程(七)Ability的信息传递等   Unreal Engine 4(虚幻UE4)GameplayAbili ...

  5. Linux 防火墙和SELinux的开启和关闭

    防火墙(firewalld) 临时关闭防火墙 systemctl stop firewalld 永久防火墙开机自关闭 systemctl disable firewalld 临时打开防火墙 syste ...

  6. Linux安装MySQL8.0.12之二进制安装

    运行环境:centos 7.5 + mysql8.0.12 1.下载官方打包好的二进制安装包: wget https://cdn.mysql.com//Downloads/MySQL-8.0/mysq ...

  7. 使用unbound提供DNS域名解析服务

    使用unbound提供DNS域名解析服务 # 作者:Eric # 微信:loveoracle11g # 先配yum仓库 [root@server1 ~]# cd /etc/yum.repos.d/ [ ...

  8. CentOS之正则表达式

    支持linux正则表达式的工具有:grep:实现查找,sed,awk:都是流式编辑器,可以实现查找和替换,并且把替换的文本输出到屏幕上. grep工具 grep [-cinvABC] 'word' - ...

  9. 2-java内省机制(Introspector)

    来一个简单的示例吧 package com.my.test; import java.beans.BeanInfo; import java.beans.Introspector; import ja ...

  10. conda和pip环境管理

    1.anaconda换源 制定清华的源: conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/ ...