Question

我尝试使用Flow扩展React.Component。这个想法非常简单，

Bar延伸Foo。

Foo扩展了React.component。

基本上，我只想共享默认属性并在子类中添加一个。然后是这样的：

/* @flow */
import React from 'react';
import Foo from './Foo.js';

class Bar extends Foo {

    props : {
        prop2 : string
    }

    static defaultProps = {
        prop1: "Default Bar",
        prop2: "Hello World"
    }

    render() {

    }
}
export default Bar;

/* @flow */
import React from 'react';
class Foo extends React.Component {

    props : {
        prop1 : string
    }

    static defaultProps = {
        prop1: "Default Foo"
    }

    render() {
        return;
    }
}

export default Foo;

当然，这段代码根本不起作用，但你有什么想法和示例代码吗？

非常感谢，

Orb

Answer 1

实际上，正如其官方文档中所见，React的创建者建议使用合成而不是继承：

https://facebook.github.io/react/docs/composition-vs-inheritance.html

我还听说过一些开发人员在项目中间选择使用继承时转换道路的情况，并且正如React的人所说，你可能会重新考虑它：

在Facebook，我们在数千个组件中使用React，而且我们还没有找到了我们建议创建组件的任何用例继承层次结构。

（ ...在此处找到）：

https://facebook.github.io/react/docs/composition-vs-inheritance.html#so-what-about-inheritance

======

添加组成示例：

但是，我的下面的合成模式示例可能会帮助您达到您想要的效果（类似于＆＃34; 类似继承＆＃34;）：

Foo.js （只需添加getDefaultProperty()）

/* @flow */
import React from 'react';
class Foo extends React.Component {

    props : {
        prop1 : string
    }

    static defaultProps = {
        prop1: "Default Foo"
    }

    getDefaultProperty = () => {
      return this.prop1;
    }

    render() {
        return;
    }
}

export default Foo;

Bar.js （此部分扩展＆＃34; Foo＆＃34;使用合成模式）：

/* @flow */
import React from 'react';
import Foo from './Foo.js';

class Bar extends React.Component {

    props : {
        prop2 : string
    }

    static defaultProps = {
        prop1: "Default Bar",
        prop2: "Hello World"
    }

    componentDidMount() {
      console.log(this.refs.parent.getDefaultProperty());
      // here you should see prop1 of Foo (the parent) is logged
      // or you can copy prop1 value from parent:
      if (this.refs.parent && this.refs.parent.getDefaultProperty()){
        this.prop1 = this.refs.parent.getDefaultProperty();
      }           

    }

    render() {
      return (
        <Foo ref="parent">
          <div>{this.prop2 + ", I am the Bar component, my value now is " + this.prop1}</div>
        </Foo>
      )        
   }
}
export default Bar;

更详细地说，Bar组件仍然会延伸React.Component，但它仍然可以访问Foo的方法，该方法返回Foo＆＃39; s {{1使用prop1

实际上，只需在ref的{{1}}方法中渲染Foo，给它一个render，然后我们就可以访问 Foo方法<<00> / strong>即可。这是构图模式。

使用Flow扩展React组件

1 个答案: