标签：code 标签 div roo ntb 一个 demo end facebook
参考：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，总结如下：
（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;
标签：code 标签 div roo ntb 一个 demo end facebook
原文地址：http://www.cnblogs.com/sheshihao/p/7220848.html
