首页 > 代码库 > 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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。