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'));

React 第十一章组件的组合使用相关推荐

PMBOK(第六版) PMP笔记——《十一》第十一章（项目风险管理）
PMBOK(第六版) PMP笔记--<十一>第十一章(项目风险管理) 第十一章风险管理: 项目的独特性导致项目充满风险,项目风险是一种不确定的事件或条件,可能发生.将要发生,也可能不发 ...
信息系统项目管理师---第十一章项目风险管理历年考题
信息系统项目管理师-第十一章项目风险管理历年考题 1.2005 年 5 月第 47 题 :在项目风险管理的基本流程中,不包括下列中的(C ). A.风险分析 B.风险追踪 C.风险规避措施 D.风险管 ...
精通Web Analytics 2.0 （13）第十一章：变身分析忍者的指导原则
精通Web Analytics 2.0 (13) 第十一章:变身分析忍者的指导原则精通Web Analytics 2.0 : 用户中心科学与在线统计艺术第十一章:变身分析忍者的指导原则这个激动人 ...
PMP备考指南之第十一章：项目风险管理
求关注项目风险管理第十一章项目风险管理项目的独特性导致项目充满风险,项目风险是一种不确定的事件或条件,可能发生.将要发生,也可能不发生.已发生的消极风险可视为问题,问题又会引发风险. 7 个过 ...
第十一章 Direct3D Initialization
第十一章 Direct3D Initialization 本章将完成渲染引擎的基础部分的最后一个模块Direct3D的初始化,学习Direct3D C++ API,并完成一个Direct3D应用程序. ...
第十一章.软件工程（下）
目录第十一章.软件工程第九节.面向对象设计面向对象(OAA)的基本概念面向对象开发各阶段划分及任务 OOA 设计原则 OOA - UML OOA 设计模式的概念 OOA 设计模式的分类创建型 ...
PMBOK(第六版) PMP笔记——《第十一章项目风险管理》
第十一章风险管理: 项目的独特性导致项目充满风险,项目风险是一种不确定的事件或条件,可能发生.将要发生,也可能不发生. 已发生的消极风险可视为问题,问题又会引发风险. 7 个过程: 1.规划风险管 ...
第十一章 Servlet MVC模式
内包含案例,基于jsp+servlet的:MVC模式计算器:MVC模式登陆第十一章 Servlet MVC模式模型-视图-控制器(model-view-controller),简称MVC.MVC是 ...
【译】 WebSocket 协议第十一章——IANA 注意事项（IANA Considerations）
概述本文为 WebSocket 协议的第十一章,本文翻译的主要内容为 WebSocket 的 IANA 相关注意事项. IANA 注意事项(协议正文) 11.1 注册新 URI 协议 11.1.1 ...

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

React 第十一章组件的组合使用相关推荐

最新文章

热门文章

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

React 第十一章 组件的组合使用相关推荐

最新文章

热门文章

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

React 第十一章组件的组合使用相关推荐