javascript - 在 React 中创建一个类并使用高阶组件导出

Question

我正在 React 中编写一个类，并使用更高阶的组件导出它，目前我有......

import React, { Component } from 'react';
import { withRouter }       from 'react-router';


/**
    Project Editor
*/
class SpiceEditorRaw extends Component { ... }

const SpiceEditor = withRouter(SpiceEditorRaw);    
export default SpiceEditor;

然后在另一个文件中导入 SpiceEditor 并将其子类化为

import SpiceEditor from './SpiceEditor'

class NameEditor extends SpiceEditor {

    constructor(props){ ... } 

    ...
    render () { return (<h1> hello world <h1/>) }

}

但是我收到错误:

index.js:2178 Warning: The <withRouter(SpiceEditorRaw) /> component appears to have a render method, but doesn't extend React.Component. This is likely to cause errors. Change withRouter(SpiceEditorRaw) to extend React.Component instead.

我相信可以使用 withRouter 创建一个组件，所以我的语法一定不正确？

Answer 1

通常不应在 React.Component 之外的任何其他组件上使用 extends。我认为Composition vs Inheritance文档的一部分是关于这个主题的很好的读物。

您可以通过组合来完成几乎所有事情。

示例

import SpiceEditor from './SpiceEditor'

class NameEditor extends React.Component {
  render () {
    return (
      <SpiceEditor>
        { /* ... */ }
      </SpiceEditor>
    )
  }
}