Question

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

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

提前致谢！

Answer 1

曾几何时，人们可以使用mixins来实现您的目标。从那以后，这篇文章出来了：https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html 在我看来，它们仍然是一个选项，但需要遵守纪律，以免你过度使用这个概念。

您的其他选择是：

a）将所需方法提升一级。我的意思是你可以在容器组件中声明它并将它沿props传递给2个孩子。

b）如果该方法足够通用，则在要在两个组件中导入的实用程序类中声明它。（使用static也是一个选项）

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

Answer 2

在Split off版本中扩展基类。如果你使用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 of the above

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

2 个答案: