React 第十一章 组件的组合使用

在之前组件之前都是通过父组件的render中进行合并返回为一个整体组件，单个组件相对外部都是相互独立的。

本节将会介绍组件之间的组合，如包裹关系、通过props传递组件进行内部组合等

1，通过组件标签进行包裹子组件实现组合，在组件内部通过this.props.children 特殊属性进行获取,如：

import React from 'react';
import ReactDOM from 'react-dom';

//React推荐使用组合而非继承来实现组件间的代码重用。
class Window extends React.Component{
	constructor(props){
		super(props);
	}
	
	render(){
		return(
			<div style={{border:"5px solid #ccc"}}>
				{this.props.children}
			</div>
		);
	}
}

ReactDOM.render(<Window>
This is Mgs Window!
</Window>,document.getElementById('root'));
           

2，通过属性传递组件，比如我们要实现一个聊天窗口，我们需要将左侧联系人列表组件和右侧聊天界面合并为一个组件，此时我们可以将联系人组件、以及聊天窗口作为父组件的属性传入，在父组件的render中可以进行自由组合，代码如下：

import React from 'react';
import ReactDOM from 'react-dom';

//React推荐使用组合而非继承来实现组件间的代码重用。
class Window extends React.Component{
	constructor(props){
		super(props);
	}
	
	render(){
		return(
			<div style={{border:"5px solid #ccc"}}>
				{this.props.children}
			</div>
		);
	}
}

//联系人
class Contacts extends React.Component{
	constructor(props){
		super(props);
	}
	render(){
		return(<div>联系人列表</div>);
	}
}

class ChatWindow extends React.Component{
	constructor(props){
		super(props);
	}
	render(){
		return(<table>
			<tr>
				<td>{this.props.left}</td>
				<td>{this.props.right}</td>
			</tr>
		</table>);
	}
}
var winObj =  <ChatWindow left={<Contacts />} right={<Window>聊天窗口</Window>} />;

ReactDOM.render(winObj,document.getElementById('root'));
           

3，另外也可以通过对子组件进行再次封装包裹成为新的组件，如：

import React from 'react';
import ReactDOM from 'react-dom';

//React推荐使用组合而非继承来实现组件间的代码重用。
class Window extends React.Component{
	constructor(props){
		super(props);
	}
	
	render(){
		return(
			<div style={{border:"5px solid #ccc"}}>
				{this.props.children}
			</div>
		);
	}
}

class WelcomeWindow extends React.Component{
	
	constructor(props){
		super(props);
	}
	
	render(){
		return (
				<div>
					{this.props.title}
					<Window >
						{this.props.msg}
					</Window>	
				</div>
		);
	}
}

ReactDOM.render(<WelcomeWindow title="欢迎你" msg="欢迎来到这里。。" />,document.getElementById('root'));