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.

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

Answer 1

通常不应该在extends以外的任何其他组件上使用React.Component。我认为文档的Composition vs Inheritance部分对这一主题很有帮助。

您几乎可以用合成来完成所有事情。

示例

import SpiceEditor from './SpiceEditor'

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

在React中创建一个类并导出具有更高顺序的组件

1 个答案: