react组件基础之react多组件嵌套

多组件嵌套

footer.js组件

import React from 'react';
export default class ComponentFooter extends React.Component{
  render(){
    return (
      <footer>
        <h1>这里是页脚，一般放置版权的一些信息。</h1>
      </footer>
    )
  }
}

bodyindex.js组件

import React from 'react';
export default class BodyIndex extends React.Component{
  render(){
    return (
      <div>
        <h2>页面的主体内容</h2>
      </div>
    )
  }
}

header.js组件

import React from 'react';
export default class ComponentHeader extends React.Component{
  render(){
    return (
      <header>
        <h1>这里是头部</h1>
      </header>
    )
  }
}

index.js

var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';
import ComponentFooter from './components/footer';
import BodyIndex from './components/bodyindex';  //导入三个组件进来，快速构建一个页面

class Index extends React.Component {
	render() {

		/*
		var component;
		if (用户已登录) {
			component = <ComponentLoginedHeader/>
		}
		else{
			component = <ComponentHeader/>
		}
		*/

		return (
			<div>
				<ComponentHeader/>
				<BodyIndex/>
				<ComponentFooter/>
			</div>
		);
	}
}
ReactDOM.render(
	<Index/>, document.getElementById('example'));

小结

组件也可以通过参数的形式进行传递

组件的return函数里返回的HTML节点必须是一个

注意项目命名的规范与文件的结构化