React开发实战 —— 【三】页头页脚模块

在js文件夹下新建component文件夹，项目的组件都保存在里面；

一、PC端页头组件

1、建立文件
在component文件夹之外，新建indx.js文件，名称要对应在webpack-config.js中设置的entry（入口）文件的名称。index.js用来设置路由

2、新建pc_header文件，存放PC端页头组件。

3、将页头组件{PCHeader}引入index.js

4、定义入口

要通过定位ID对html进行操作，需要通过ReactDOM.render()对组件进行定位绑定

5、组件参数化
组件可以通过参数的形式进行传递，这样子可以对情况进行判断（例如三元表达式），然后向用户展示不同的组件。

ReactDOM.render是React的最基本方法用于将模板转为HTML语言，并插入指定的DOM节点。

ReactDOM.render(template,targetDOM),该方法接收两个参数：第一个是创建的模板，多个dom元素外层需使用一个标签进行包裹，如<div>；第二个参数是插入该模板的目标位置。

6、disabled禁用事件

disabled 表示禁用此 input 元素。被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。

7、html代码在JSX中显示

HTML代码参数要传到JSX中，并能以正确的状态渲染出来，有两种办法：
 1 用Unicode转码，将html代码转为Unicode代码
  2 用dagerouslySetInnerHTML 属性

dagerouslySetInnerHTML 属性，通过__html接收参数

<p dangerouslySetInnerHTML={{__html : html对象}}></p>
注意：用此方法可能会存在XSS攻击

 
 
8、生命周期函数 （钩子）
生命周期函数，属于内置函数，有固定的名称。
生命周期函数加载的顺序：先父组件的will，子组件的will，子组件的did ，父组件的did

网站搭建采用Flex布局（弹性布局）

引入AntD框架中的Layout（布局），快速实现Flex布局。AntD 中的Layout将页面横向上分为24格。行为Row，列为Col，Col标签中用span属性来划分24格

  <Row>
      <Col span={12}>col-12</Col>
      <Col span={12}>col-12</Col>
    </Row>

注意：在AntD 3 中Grid用作栅格，Layout用作布局

页头图标网站，推荐 ICONFINDER

二、移动端页头组件

三、PC端页脚组件

四、移动端页脚组件