• React入门---组件-4


    组件:网页可以分为多个模块,比如头部,底部,分享等各种模块,这些模块在其他页面也可能会用到,我们把这些分开,每一个模块当作一个组件,进行复用。

    接下来直接以头部 header作为一个组件来进行demo演示组件。

    下面是整体的一个项目的框架:

    到现在,项目的文件夹里面有两个文件 package.json 和 webpack.config.js

    1. 在项目文件夹中创建 src文件夹(源代码放这里面)

    2. src文件中创建app.html文件 和 js文件夹

    3. js文件夹中创建 index.js文件(入口文件夹) 和 components文件夹(用来放一些组件)

    4. components文件夹中创建header.js文件(头部的一个组件,可以公用/复用)

    (以上文件夹的框架是我自己练习的框架,可根据不同需要进行命名,只需要注意在配置文件中相应修改)

    这个时候项目文件框架应该是这样:

    解析以及各个文件的代码:

    1. app.html------最后内容会放在这里

    <div id="test"> 123 </div>

    2. index.js------首先写最基本引入包

    var React = require('react');
    var ReactDOM = require('react-dom');

    3. header.js------写头部组件

    import React from 'react';
    import ReactDOM from 'react-dom';
     //创建一个类 ComponentHeader 相当于继承react里component的子类
     //export default 输出这个类
    export default class ComponentHeader extends React.Component{
         //render() 解析类的一个输出
         render(){
             return(
                 <div>
                     <h1>这里是头部</h1>
                 </div>
                 )
         }
     }

    代码的意思:创建了一个ComponentHeader的类,通过render方法解析这个类,我们要将 return返回的内容插入到入口JS文件中,也就是index.js;

    需要注意,可以给外部使用的组件定义要写:export default

    4. index.js------与组件header.js关联

    var React = require('react');
    var ReactDOM = require('react-dom');
    //把刚才定义的头部引用进来 from后面写路径
    import ComponentHeader from './components/header.js'
    class Index extends React.Component{
        render(){
            return(
           <div>   
    <ComponentHeader></ComponentHeader>
           </div> ) } } //与app.html进行一个绑定,即:入口的定义 ReactDOM.render(<Index/>,document.getElementById('test'));

    5. CMD进入到项目文件夹 运行webpack的热加载:(在js中修改后按保存,会自动在浏览器中刷新)

    webpack-dev-server

    在浏览器 运行:http://localhost:8080

    一个小的react-demo就运行完成了。

    注意:

      组件的render方法,return返回的HTML节点必须是一个。

      下面是一个错误示范,出现了两个节点,会报错。

    render(){
            return(
                //错误示范 
                <ComponentHeader></ComponentHeader>
                <h2>这里头部2</h2>
                )
        }

      解决方法:放到一个节点里面<div></div>,如下:

    render(){
            return(
                //正确示范 
                <div>
                    <ComponentHeader></ComponentHeader>
                    <h2>这里头部2</h2>
                </div>
                )
        }
  • 相关阅读:
    SiteMesh在项目中的配置
    javascript深入理解js闭包
    小tip: 使用CSS将图片转换成黑白(灰色、置灰)
    java程序员最不愿意看到的十件事
    Spring AOP AspectJ
    2万字Java并发编程面试题整理(含答案,建议收藏)
    85道Java微服务面试题整理(助力2020面试)
    10个很多人不知道的Redis使用技巧
    2020年大厂Java面试题(基础+框架+系统架构+分布式+实战)
    2020年薪30W的Java程序员都要求熟悉JVM与性能调优!
  • 原文地址:https://www.cnblogs.com/azedada/p/6835899.html
Copyright © 2020-2023  润新知