要获得类似于继承的内容(实际上是注释中指出的 组成
),可以
Airplane在示例中将本身包装为
Vehicle。如果要
Vehicle在
Airplane组件中公开方法,则可以使用ref并将它们一对一连接。这并不完全是继承(实际上是 composition
),尤其是因为
this.refs.vehicle在组件安装之后才能访问。
var Vehicle = React.createClass({ ...});var Airplane = React.createClass({ methodA: function() { if (this.refs != null) return this.refs.vehicle.methodA(); }, ... render: function() { return ( <Vehicle ref="vehicle"> <h1>J/K I'm an airplane</h1> </Vehicle> ); }});另外值得一提的是,在React官方文档中,他们更喜欢组合而不是继承:
那么继承呢?在Facebook,我们在成千上万的组件中使用React,但还没有发现建议创建组件继承层次结构的用例。
道具和组合为您提供了以显式且安全的方式自定义组件外观和行为所需的所有灵活性。请记住,组件可以接受任意道具,包括原始值,React元素或函数。
如果要在组件之间重用非UI功能,建议将其提取到单独的Javascript模块中。组件可以导入它并使用该函数,对象或类,而无需对其进行扩展。
值得一提的另一件事是,使用ES2015 / ES6 +,您还可以将对象道具从
Airplane组件传播到
Vehicle组件
render: function() { return ( <Vehicle {...this.props}> <h1>J/K I'm an airplane</h1> </Vehicle> );}


