组件模块化

回顾新闻点赞案列：
http://blog.csdn.net/github_26672553/article/details/76619122

父子组件

<h2>文章标题：{this.state.news.title}</h2>

我们可以把 新闻标题 部分HTML抽取处理，定义为一个专门的组件。

// 新闻标题组件class Title extends React.Component{    render(){        return <div>            <h2>文章标题：{this.props.title}</h2>        </div>    }}

注意是用this.props.title获取。

在News组件里使用这个Title组件(Title就是子组件)：

// 在News组件里 用 <Title title={this.state.news.title}/> // 替换 <h2>文章标题：{this.state.news.title}</h2>

注意在组件的时间传递属性值。

OK，我们发现页面正常显示和为修改之前一样。说明我们的修改没有问题。
全部代码如下：

import React from 'react';import ReactDOM from 'react-dom';import axios from "axios";// 定义新闻组件class News extends React.Component{    // 初始化    constructor(props){        super(props);        this.state = {            news: {}, // 新闻数据            clickNum:0 // 点赞数        };    }    // 组件渲染之前    componentWillMount(){        // ajax请求服务器获取新闻数据        axios.get(            "http://localhost/news.php",            {params:{newsid:this.props.newsid}}        )        .then((res)=>{            //console.log(res.data);            this.setState({                news: res.data, // 保存从服务器请求回来的数据                clickNum:res.data.clickNum            })        })    }    // 渲染到页面    render(){        return <div>            <Title title={this.state.news.title}/>            <p>                <span>创建时间：{this.state.news.created}</span> |                点赞数：<a href="javascript:;" onClick={this.clickNumHandel.bind(this)}>{this.state.clickNum}</a>            </p>            <p>{this.state.news.desc}</p>        </div>    }    //自定义函数处理 用户点赞动作    clickNumHandel(){        axios.post(            "http://localhost/test.php",            {params:{newsid:this.props.newsid}}        )            .then((res)=>{                console.log(res.data);                this.setState({                    clickNum:res.data.clickNum  // 更新 点赞数                })            })    }}// 新闻标题组件class Title extends React.Component{    render(){        return <div>            <h2>文章标题：{this.props.title}</h2>        </div>    }}// 最后渲染ReactDOM.render(    <News newid="101" />, // 使用组件    document.getElementById('root'));

我想你和我一样 看出来了 这个代码有点儿长了

组件模块化(分开到多个文件)

我们把 2个组件抽取处理
title.js标题组件：

import React from 'react';export default  class Title extends React.Component{    render(){        return <div>            <h2>文章标题：{this.props.title}</h2>        </div>    }}

news.js新闻组件：

// 用到的引入import React from 'react';import axios from "axios";// 引入组件import Title from "./title";export default class News extends React.Component{    // 初始化    constructor(props){        super(props);        this.state = {            news: {}, // 新闻数据            clickNum:0 // 点赞数        };    }    // 组件渲染之前    componentWillMount(){        // ajax请求服务器获取新闻数据        axios.get(            "http://localhost/news.php",            {params:{newsid:this.props.newsid}}        )            .then((res)=>{                //console.log(res.data);                this.setState({                    news: res.data, // 保存从服务器请求回来的数据                    clickNum:res.data.clickNum                })            })    }    // 渲染到页面    render(){        return <div>            <Title title={this.state.news.title}/>            <p>                <span>创建时间：{this.state.news.created}</span> |                点赞数：<a href="javascript:;" onClick={this.clickNumHandel.bind(this)}>{this.state.clickNum}</a>            </p>            <p>{this.state.news.desc}</p>        </div>    }    //自定义函数处理 用户点赞动作    clickNumHandel(){        axios.post(            "http://localhost/test.php",            {params:{newsid:this.props.newsid}}        )            .then((res)=>{                console.log(res.data);                this.setState({                    clickNum:res.data.clickNum  // 更新 点赞数                })            })    }}

最后在入口文件index.js：

import React from 'react';import ReactDOM from 'react-dom';// 引入News组件import News from "./components/news";// 最后渲染ReactDOM.render(    <News newid="101" />, // 使用组件    document.getElementById('root'));

入口文件一下子代码量少了很多。

分离完成查看页面没有任何不同。