React 组件化嵌套

React 组件化嵌套

---

组件

简单的理解组件就是，页面中可以有很多模块，如果将每个模块写成单独的组件，我就可以实现组件的复用。比如一个页面的头部，很多页面可能都会使用这个头部。

上面的页面，可以这样进行划分组件，其他的页面也可以调用。废话不多说，直接上代码看效果

代码

在这之前写过一篇webpack+React的热加载配置，这里就不写了，不会的可以点击下面的链接看看
webpack+React的热加载
这里就直接从代码入手

文件目录

热加载配置之后的文件目录为

(这里提示一下，只是根目录不一样）

然后在js文件夹下面创建一个components文件夹，用来存放所有的组件。下面的就是创建之后的文件目录。

然后就在components文件夹下创建组件，我这里用到了三个组件，就建三个组件js。header.js , footer.js , BodyIndex.js。

代码

首先写index.html

<div id="example">123</div>
<script src="bundle.js"></script>

这里的id为example的div为容器，引入的js是webpack打包之后的js文件。

然后我们进行组件的开发

header.js

import  React from 'react';
import ReactDom from 'react-dom';

export default class ComponentHeader extends React.Component{
    render(){
        return (
            <header>
                <h1>这里是头部</h1>
            </header>
        )
    }
}

BodyIndex.js

import React from 'react';

export default class BodyIndex extends React.Component{
    render(){
        return(
            <div>
                <h1>这里是主要的页面信息</h1>
            </div>
        )
    }
}

footer.js

import React from 'react';
import ReactDOM from 'react-dom';

export default class ComponentMyself extends React.Component{
    render(){
        return(
            <footer>
                <h3>这里是脚部</h3>
            </footer>
        )
    }
}

可以看见上面的代码差不多，只是组件名不一样，其中要注意的是：

1. 因为是组价，要被其他组件引用，所以必须导出，不然别的地方获取不到这个组件。
2. 在定义组件的时候是用class来定义的，继承于React的Component。
3. 定义组件时，组件名的首字母必须大写。
4. 返回时，只能将代码放入一个容器中返回，不能是一下的代码样式

export default class ComponentMyself extends React.Component{
    render(){
        return(
            <footer>
                <h3>这里是脚部</h3>
            </footer>
            <div>这是第二个容器</div>
        )
    }
}

接下来定义一个index.js，去调用前面的三个组件。

var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';
import BodyIndex from './components/BodyIndex';
import ComponentMyself from './components/footer';

class Index extends React.Component{
    render(){
        return(
            <div>
                <ComponentHeader />
                <BodyIndex />
                <ComponentMyself />
            </div>
        )
    }
}

ReactDOM.render(
    <Index/>,
    document.getElementById('example')
)

可以看到这里调用组件的时候使用的是

import 组件名from '组件地址'

定义了一个Index组件，并调用其他三个组件，因为这个组件不被其他的调用，所以没有使用export。并且返回的也是一个容器。组件使用的时候，直接写组件名就可以了，也可以进行变量的替换。比如：

var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';
import BodyIndex from './components/BodyIndex';
import ComponentMyself from './components/footer';

class Index extends React.Component{
    render(){
        var footer = <ComponentMyself />
        return(
            <div>
                <ComponentHeader />
                <BodyIndex />
                {footer}
            </div>
        )
    }
}

ReactDOM.render(
    <Index/>,
    document.getElementById('example')
)

最后就是将写的东西加载到页面中。使用ReactDOM.render()方法，获取到id为example的容易。到这里就已经完成了简单的组件嵌套。因为之前已经有热加载，这里只需要保存，然后在页面中打开webpack热加载后生成的那个地址就可以查看效果了。