年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1629|回复: 0

[React] 第二讲 React组件(component)的基本使用

[复制链接]
  • TA的每日心情
    奋斗
    2022-12-13 21:26
  • 签到天数: 371 天

    [LV.9]以坛为家II

    发表于 2017-12-22 10:35:59 | 显示全部楼层 |阅读模式
    本帖最后由 Sian 于 2017-12-22 10:37 编辑

    1、前面已经讲到了如何使用React进行DOM的基本操作,通过ReactDOM的render()方法来渲染Html视图;
    [HTML] 纯文本查看 复制代码
       ReactDOM.render(
         <h1>Hello React</h1>,
         document.getElementById("container")
       );
    // 等同于
        ReactDOM.render(
          React.createElement("h1",null,"Hello React"),
          document.getElementById("container")
        );

    2、上面的<h1>Hello React</h1>和Html标签一模一样,但在这里不能理解成是Html标签,而是JSX语法,也可以理解成是React自带的基础组件,最终会被解释成下面的样式,被Javascript执行;
    3、这种所谓的基础组件,对应Html标签都有一个与之一模一样的组件,方便使用,除此之外还支持自定义组件丰富实际开发需要;
    4、使用React的createClass()方法创建一个组件,写法与格式以及说明在注释中注明
    [HTML] 纯文本查看 复制代码
    /**
         * 创建一个组件,用于输出Hello React
         1、组件类名以大写字母开头,大驼峰命名法;
         2、在React中使用React.createClass方法创建一个组件类
         3、核心代码:每个组件都必须实现自己的render()方法,输出定义好的组件模板,返回值:null,false、组件模板
         4、注意:组件类只能包含一个顶层标签
         */
    
         // 代码示例
         var HelloMessage = React.createClass({
           render:function(){
             return <h1>Hello React</h1>;
           }
         });
    
         ReactDOM.render(
           //  模板中插入<HelloMessage />会自动生成一个实例
           <HelloMessage />,
           document.getElementById("container")
         );

    效果链接:http://www.yusian.com/react/component/index.html
    5、组件还可以通过嵌套组成复合组件
    5.1、先创建两个组件,分别实现不同的内容
    [JavaScript] 纯文本查看 复制代码
         var WebName = React.createClass({
           render:function(){
             return <h1>Sian</h1>;
           }
         });
    
         var WebLink = React.createClass({
           render:function(){
             return <a href="http://www.yusian.com">http://www.yusian.com</a>
           }
         });

    5.2、再创建一个组件,该组件包含的内容为前面所创建的组件,这就叫复合组件
    [JavaScript] 纯文本查看 复制代码
         var WebShow = React.createClass({
           render:function(){
             return (
               <div>
                <WebName />
                <WebLink />
               </div>
             );
           }
         });

    5.3、再渲染时直接使用该复合组件即可得到前面两组件的效果和
    [JavaScript] 纯文本查看 复制代码
         ReactDOM.render(
           <WebShow />,
           document.getElementById("container")
         );

    5.4、效果链接:http://www.yusian.com/react/component/index1.html
    6、在浏览器空白处右击,点击“检查”查看浏览器最终解释的Html结构;
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-3-29 00:10 , Processed in 0.048397 second(s), 18 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表