javascript React ES6 组件继承：工作，但不推荐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30259405/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React ES6 component inheritance: working, but not recommended?
提问by poshaughnessy
I'm currently inheriting an ES6 React base component in the following way:
我目前正在通过以下方式继承 ES6 React 基础组件：
model.js (base component):
model.js（基础组件）：
class ModelComponent extends React.Component {
render() {
// Re-used rendering function (in our case, using react-three's ReactTHREE.Mesh)
...
}
}
ModelComponent.propTypes = {
// Re-used propTypes
...
};
export default ModelComponent;
Then I have two extending components that both look basically like this:
然后我有两个扩展组件，它们看起来基本上是这样的：
import ModelComponent from './model';
class RobotRetroComponent extends ModelComponent {
constructor(props) {
super(props);
this.displayName = 'Retro Robot';
// Load model here and set geometry & material
...
}
}
export default RobotRetroComponent;
This appears to work fine. Both models are showing up and working as I would expect.
这似乎工作正常。两种模型都按照我的预期出现并工作。
However, I have read in multiple places that inheritance is not the correct approach with React - instead I should be using composition. But then again, Mixins are not supported in React v0.13?
但是，我在多个地方读到继承不是 React 的正确方法——相反，我应该使用组合。但话说回来，React v0.13 不支持 Mixin？
So, is the approach I'm taking above OK? If not, what's the problem, and how should I do this instead?
那么，我上面采取的方法好吗？如果没有，有什么问题，我应该怎么做？
回答by Jonathan Huang
The Facebook team recommends 'using idiomatic JavaScript concepts' when writing React code, and since there is no mixin support for ES6 classes, one should just use composition (since you are just making use of idiomatic Javascript functions).
Facebook 团队建议在编写 React 代码时“使用惯用的 JavaScript 概念”，并且由于没有对 ES6 类的 mixin 支持，因此应该只使用组合（因为您只是在使用惯用的 Javascript 函数）。
In this case, you can have a composeModalfunction that takes a component and returns it wrapped in a higher-order, container component. This higher-order component will contain whatever logic, state, and props you want passed down to all of its children.
在这种情况下，您可以拥有一个composeModal函数，该函数接受一个组件并将其返回包装在一个更高阶的容器组件中。这个高阶组件将包含您想要传递给其所有子级的任何逻辑、状态和道具。
export default function composeModal(Component){
class Modal extends React.Component {
constructor(props){
super(props)
this.state = {/* inital state */}
}
render() {
// here you can pass down whatever you want 'inherited' by the child
return <Component {...this.props} {..this.state}/>
}
}
Modal.propTypes = {
// Re-used propTypes
...
};
return Modal
}
Then you can use the composition function like so:
然后你可以像这样使用组合函数：
import composeModal from './composeModal';
class RobotRetroComponent extends React.Component {
constructor(props) {
super(props);
this.displayName = 'Retro Robot';
// Load model here and set geometry & material
...
}
render(){
return /* Your JSX here */
}
}
export default composeModal(RobotRetroComponent);
