React组件的组合

React组件的组合是指：将一个组件写在另一个组件的内容中，然后在外层组件中通过 this.props.children来接收内容中的组件， 效果上类似vue中的插槽。

App.js

import React, { Component } from "react";
import NavBar from "./NavBar";

export default class App extends Component {
	render() {
		return (
			<div>
				<NavBar>
					<a href="/#">aaa</a>
					<em>bbb</em>
					<strong>ccc</strong>
				</NavBar>
			</div>
		);
	}
}

NavBar.js

import React, { Component } from "react";

export default class NavBar extends Component {
	render() {
		return (
			<div className="nav-bar">
				<div className={"nav-left"}>
					{this.props.children[0]}
				</div>
				<div className={"nav-mid"}>
					{this.props.children[1]}
				</div>
				<div className={"nav-right"}>
					{this.props.children[2]}
				</div>
			</div>
		);
	}
}