react学习(五)Components

参考：https://facebook.github.io/react/docs/components-and-props.html

一些独立，可重用的界面可以使用Components封装。

（一）Components定义

可以使用函数或者ES6的class定义Components，后者有一些额外的特性，前者比较简洁。

两者返回的代码必须只有一个根元素：

1.函数，代码示例：

import React from ‘react‘;

function DemoA(props) {//接受外面传入的props
    return <div>DemoA</div>
}

export default DemoA;

2.ES6的class

（1）class参考：http://es6.ruanyifeng.com/#docs/class，总结如下：

• 使用class关键字定义
• 类里面的使用constructor定义构造方法
• 这样的类中函数定义不需要使用function关键字
• 类继承使用关键字extends

（2）代码示例：

import React from ‘react‘;

class DemoB extends React.Component{//继承React.Component,在render方法中返回
    render(){
        return <div>DemoB</div>
    }
}

export default DemoB;

（二）渲染Components

//1.引入组件//index.jsimport React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import DemoB from "./components/ClassComponent";//1.引入component

let b = <DemoB></DemoB>//跟使用div标签等一样使用，记得使用驼峰写法
ReactDOM.render(b, document.getElementById(‘root‘));

//2.组件中使用组件
//DemoAB.js

import React from ‘react‘;
import ClassComponent from "./ClassComponent";
import FunctionComponent from "./FunctionComponent";

function DemoAB(props) {
    return <div>//只能返回一个根元素
        <ClassComponent></ClassComponent>
        <FunctionComponent></FunctionComponent>
    </div>
}

export default DemoAB;

（三）传值

//DemoAB.js
//组件中使用组件
import React from ‘react‘;
import ClassComponent from "./ClassComponent";
import FunctionComponent from "./FunctionComponent";

function DemoAB(props) {
    return <div>
        //1.传值
        <ClassComponent Hello="hoho Class"></ClassComponent>
        <FunctionComponent Hi="yoyo Function"></FunctionComponent>
    </div>
}

export default DemoAB;

//FunctionComponent.js
import React from ‘react‘;

function DemoA(props) {
    //2.props.Hi = ‘haha‘;不能这样子做，props的值是只读的，改变会报错
    //3.function方式，使用props
    return <div>DemoA,{props.Hi}</div>
}

export default DemoA;

//ClassComponent.js
import React from ‘react‘;

class DemoB extends React.Component{
    render(){
        //4.class方式，通过this获取props
        return <div>DemoB,{this.props.Hello}</div>
    }
}

export default DemoB;