gpt4 book ai didi

javascript - 装饰 React 组件以添加生命周期方法

转载 作者:行者123 更新时间:2023-11-29 21:40:26 28 4
gpt4 key购买 nike

我正在尝试创建一个装饰器方法,它将一些默认的生命周期方法添加到 react 组件中。我的目标是向组件中添加一些默认功能,例如,所有组件都应该能够在 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

最佳答案

如果您使用带有 stage 1 或 stage 0 预设的 Babel,您可以使用以下方法:

首先,定义你的装饰函数,例如:

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>
);
}
};

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

2 个注意事项:1) 我正在使用 babel transform-decorators-legacy 插件; 2) 我正在使用 Webpack 构建我的项目,其中包括 babel 的 transform-runtime。 YMMV.

关于javascript - 装饰 React 组件以添加生命周期方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33149772/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com