装饰 react 组件以添加生命周期方法答案

【问题标题】：Decorate react component to add lifecycle methods装饰 react 组件以添加生命周期方法
【发布时间】：2016-01-13 23:37:25
【问题描述】：

我正在尝试创建一个装饰器方法，它将一些默认的生命周期方法添加到反应组件中。我的目标是在组件中添加一些默认功能，例如所有组件都应该能够在componentWillMount 上执行特定的事情。

我阅读了几篇文章并找到了这个。它可以用来为 react 组件添加新的 props。

export default function context(contextTypes, context) {

    return function (DecoratedComponent) {
        return class {
            static childContextTypes = contextTypes;
            getChildContext() {
              return context;
            }
            render() {
              return (
                <DecoratedComponent {...this.props} />
              );
            }
        }
    }
}

但我不确定如何添加像componentWillMount 这样的类方法。我可以做类似的事情吗

Object.assign(DecoratedComponent.prototype, {
    componentWillMount: () => {
        // do something
    }
})

有正确方向的想法吗？

参考：

http://asaf.github.io/blog/2015/06/23/extending-behavior-of-react-components-by-es6-decorators/ https://gist.github.com/motiz88/3db323f018975efce575

【问题讨论】：

medium.com/@gigobyte/…

标签： javascript reactjs decorator

【解决方案1】：

如果你使用 Babel 和 stage 1 或 stage 0 预设，你可以使用以下方法：

首先，定义你的装饰器函数，例如：

function lifecycleDefaults(target) {
    target.prototype.componentWillMount = function() {
        console.log('componentWillMount ran from decorator!');
        console.log('this.props is still accessible', this.props);
    }
    target.prototype.componentWillUnmount = function() {
        console.log('componentWillUnmount ran from decorator!');
        console.log('this.props is still accessible', this.props);
    }
    target.prototype.componentDidMount = function() {
        console.log('componentDidMount ran from decorator!');
        console.log('this.props is still accessible', this.props);
    }
}

然后，使用您刚刚定义的函数来装饰组件，例如：

@lifecycleDefaults
export class Page extends React.Component {
    render() {
        return (
            <div>Hello decorators!</div>
        );
    }
};

组件“页面”现在具有方法 componentWillMount、componentDidMount 和 componentWillUnmount。它们在组件生命周期中的预期时间运行。

2 个注意事项：1）我使用的是 babel transform-decorators-legacy 插件； 2）我正在使用 Webpack 构建我的项目，其中包括 babel 的转换运行时。 YMMV。

【讨论】：