首页 > 代码库 > react学习(五)Components

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.js
import 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;

react学习(五)Components