如何从一个组件重用一个方法到另一个组件

Question

我有一个组件已经变得相当大了。我决定将其分解为两个组件，但发现我分离的组件需要使用原始组件中的一个方法。

从现有组件内部使用方法的最佳方法是什么？

提前感谢！

Answer 1

很久以前，人们就会使用mixins来实现您想要做的事情。从那时起，本文提出:在我看来，https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html仍然是一个选项，但是需要遵守纪律，这样您就不会过度使用这个概念。

对你来说，其他选择是：

( a)将所需的方法提高一级。我的意思是，您可以在容器组件中声明它，并将它沿props传递给两个子组件。

b)如果该方法足够通用，则在一个实用程序类中声明它，您将在这两个组件中导入该类。(使用static也是一种选择)

( c)任何其他创新方式;) (只是说这些并不是唯一的选择)

Answer 2

在拆分版本中扩展基类。如果使用ES6，它将如下所示：

class Base extends React.Component {

    renderText () { return 'Hello'}

    render(){
        return <span>{this.renderText()}</span>
    }
}

class SplitOff extends Base {
    render() {
        return <span>{`${this.renderText()} World`}</span>
    }
}

以上的JSFiddle