<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!-- 生产环境中不建议使用 -->

        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

    </head>

    <body>

        <div id="app">

        </div>

        <script type="text/babel">

            /*注意，原生 HTML元素名以小写字母开头，而自定义的 React类名以大写字母开头，

            比如 HelloMessage不能写成 helloMessage;

            除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错*/

            //函数封装组件

            function NewComponent(props) {

                return <h1>函数封装的组件!</h1>;

            }

            //ES6创建组件

            class Comfill extends React.Component {

              render() {

                return <h1>es6创建的组件!</h1>;

              }

            }

            //向组件传递参数

            function HelloMessage(props) {

                return <h1>你好! {props.name}!</h1>;

            }

            //复合组件

            function App() {

                return (

                    <div>

                        <NewComponent/>

                        <Comfill/>

                        <HelloMessage name="react"/>

                    </div>

                );

            }

            //const element3 = <HelloMessage name="react"/>; /*用户自定义的组件*/

            ReactDOM.render(

                <App />,

                document.getElementById('app')

            );

        </script>

    </body>

</html>

react基础语法（三）组件的创建和复合组件的更多相关文章

  1. Python 基础语法(三)

    Python 基础语法(三) --------------------------------------------接 Python 基础语法(二)------------------------- ...

  2. react基础语法（五） state和props区别和使用

    props的验证: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  3. React基础语法学习

    React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法 ...

  4. react 基础语法复习2- react入门以及JSX

    引入 react 以及 ReactDom import React from 'react'; import ReactDOM from 'react-dom'; 将react组件渲染到真实dom节点 ...

  5. react基础篇三

    事件处理 React事件绑定属性的命名采用驼峰式写法,而不是小写. 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法) 例如,传统的 HTML: < ...

  6. react 基础语法使用

    刚开始不久react,在菜鸟上及其他前辈网站上学习,下面开始我的自学笔记. 包括: 渲染元素 组件(函数方法定义.es6 class定义) 事件处理 条件渲染 列表 下面代码部分将不会再写html部分 ...

  7. react基础语法二

    这里只是对自己的学习进行一次总结,也是为了让自己以后如果长时间不使用快速记忆起来的笔记,如果想要学习,还是去官网看文档比较好一些.. 注意 下面的代码的 script标签的type类型都为 “text ...

  8. react基础学习 三

    获取原生的DOM 注意:获取DOM是要在组件渲染之后才能被获取,所以在constructor里面获取不到原生的DOM 方法一:回调函数   推荐 方法二:createRef()   16版本,推荐 方 ...

  9. vue学习（4）-组件的创建，父子组件传值，$refs

    模块化:代码逻辑 组件化:UI 组件的创建:1.

随机推荐

  1. 【转载】Android Studio简单设置

    界面设置 默认的 Android Studio 为灰色界面,可以选择使用炫酷的黑色界面.Settings --> Appearance --> Theme ,选择 Darcula 主题即可 ...

  2. 获取cookie值

    function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (do ...

  3. codeforces 414B B. Mashmokh and ACM(dp)

    题目链接: B. Mashmokh and ACM time limit per test 1 second memory limit per test 256 megabytes input sta ...

  4. RxJava RxBinding 按钮(Button) 点击(click)

    /********************************************************************* * RxJava RxBinding 按钮(Button) ...

  5. [JSOI 2007] 字符加密

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1031 [算法] 将字符串倍长 , 构建后缀数组 , 然后按要求输出即可 时间复杂度 ...

  6. UVa 1644 Prime Gap (水题，暴力)

    题意:给定一个数 n,求它后一个素数和前一个素数差. 析:先打表,再二分查找. 代码如下: #pragma comment(linker, "/STACK:1024000000,102400 ...

  7. CodeForces 712B Memory and Trident (水题，暴力)

    题意:给定一个序列表示飞机要向哪个方向飞一个单位,让你改最少的方向,使得回到原点. 析:一个很简单的题,把最后的位置记录一下,然后要改的就是横坐标和纵坐标绝对值之和的一半. 代码如下: #pragma ...

  8. Tomcat黑窗口改变Title

    start cmd /K " && call startup.bat && pause && exit " 设置Title之后,再手 ...

  9. E20180420-hm

    prior adj. 优先的; 占先的; 在…之前 alignment n. 结盟; 队列,排成直线; 校直,调整; [工] 准线; align  vt. 使成一线,使结盟; 排整齐    vi. 排 ...

  10. E20180418-hm

    utility n. [计]工具; 公用事业; 功用,效用; 有用的物体或器械; 公用事业公司; identity n. 身份; identifier  n. 识别符; 检验人,标识符; 鉴别器; 编 ...