React官方文档--Composition vs Inheritance
来源:互联网 发布:超星网络选修课怎么刷 编辑:程序博客网 时间:2024/05/22 08:06
Composition vs Inheritance
React有一个强大的结构模型,我们建议使用结构来代替继承来实现组件之间的重用。
我们将要考虑一些问题,这些问题是可以用结构来代替继承解决问题。
包含
一些组件并不知道他们的子元素到底是什么情况,像Sidebar
或者Dialog
一样都继承自boxes是很正常的一件事情。
我们建议一些组件使用特殊的children
属性来传递子元素直接到他的输出。
function FancyBorder(props) { return ( <div className={'FancyBorder FancyBorder-' + props.color}> {props.children} </div> );}function WelcomeDialog() { return ( <FancyBorder color="blue"> <h1 className="Dialog-title"> Welcome </h1> <p className="Dialog-message"> Thank you for visiting our spacecraft! </p> </FancyBorder> );}
任何在<FancyBorder>
JSX标签诶不的组件都会被传递到FancyBorder
组件中,作为children
属性。然后FancyBorder
渲染{props.children}
在其内部的<div>
组件内部,传递的元素会变成最后的输出。
有些时候我们在一个组件中有多个空洞,在这样的例子中,你可能需要使用你自己写的东西来代替children
。
function SplitPane(props) { return ( <div className="SplitPane"> <div className="SplitPane-left"> {props.left} </div> <div className="SplitPane-right"> {props.right} </div> </div> );}function App() { return ( //这个在组件当中传入了两个变量分别表示元素的左侧内容和右侧内容 <SplitPane left={ <Contacts /> } right={ <Chat /> } /> );}
专门化
有时我们想要某个组件是另外一个组件的特殊情况,比如,我们可能需要说WelcomeDialog
是Dialog
的一个特例。
在React中,这也是通过结构化实现的,一个更加特殊化的组件渲染了一个更加基础化的组件,并且使用props来修饰他。
//基本组件Dialog,通过props的title和message属性进行扩展function Dialog(props) { return ( <FancyBorder color="blue"> <h1 className="Dialog-title"> {props.title} </h1> <p className="Dialog-message"> {props.message} </p> </FancyBorder> );}//扩展组件WelcomeDialog,传递给基本组件Dialog两个参数function WelcomeDialog() { return ( <Dialog title="Welcome" message="Thank you for visiting our spacecraft!"> </Dialog> )}
0 0
- React官方文档--Composition vs Inheritance
- Reactjs入门官方文档(十)【composition-vs-inheritance】
- React-----Composition(构造)VS Inheritance(继承)
- Inheritance VS Composition
- Inheritance vs Composition
- Composition vs. Inheritance: How to Choose?
- Multiple Inheritance in Java and Composition vs Inheritance
- Inheritance & Composition
- 老调重弹 Composition versus Inheritance
- Favor composition over inheritance
- react native 官方文档
- React官方文档--Forms
- 笨方法学Python 习题 44: 继承(Inheritance) VS 合成(Composition)
- Chapter 6:Inheritance and Composition
- React Native 官方文档中文版
- React官方文档--Introducing JSX
- React官方文档--Rendering Elements
- React官方文档--Handling Events
- 类似于QQ个人主页,NavigationBar透明渐变
- Matlab random(转)
- 在eclipse中 自定义maven配置
- python内置容器之元组
- H264 RTP 封包原理
- React官方文档--Composition vs Inheritance
- bzoj 2208: [Jsoi2010]连通数 (dfs|tarjan+bitset+拓扑序)
- CentOS7.2下安装VSCode1.6.1后启动失败
- java文件上传和下载
- Win10 Docker 安装使用
- Android蓝牙打印机,带你真正了解各种打印格式
- 《JVM学习系列》三.HotSpot虚拟机对对象的回收
- 删除所有独特的元素
- javascript实现动画的联动