gpt4 book ai didi

meteor - Meteor 1.4 中的装饰器

转载 作者:行者123 更新时间:2023-12-03 14:21:20 24 4
gpt4 key购买 nike

我试图了解装饰器如何与 Meteor 1.4 一起工作。据我read ,支持此功能。

现在,我不确定如何实际实现它。来自 this blog ,要装饰一个类,我需要这段代码

export const TestDecorator = (target) => {
let _componentWillMount = target.componentWillMount;
target.componentWillMount = function () {
console.log("*** COMPONENT WILL MOUNT");
_componentWillMount.call(this, ...arguments);
}
return target;
}

然后将其用作

import React, { Component } from 'react';
import { TestDecorator } from 'path/to/decorator.js';

@TestDecorator
export default class FooWidget extends Component {
//...
}

代码可以编译,但在渲染组件时没有任何输出。

我错过了什么?如何在 Meteor 中实现装饰器?这是正确的解决方案吗?有什么替代方案吗?

编辑

我已经尝试过了,还是不行

export const TestDecorator = (target) => {
console.log("*** THIS IS NOT EVEN DISPLAYED! ***");
target.prototype.componentWillMount = function () {
// ...
};
}

最佳答案

您正在将 componentWillMount 函数分配给类 FooWidget 而不是它的原型(prototype)。将其更改为 target.prototype.componentWillMount = ...。此外,在这种情况下,存储之前的 componentWillMount 是不必要的,因为它无论如何都是 undefined

这是一个full working example :

ma​​in.html

<head>
<title>decorators</title>
</head>

<body>
<div id="root"></div>
</body>

装饰器.js

export const TestDecorator = (target) => {
console.log('Decorating…');

target.prototype.componentWillMount = function() {
console.log('Component will mount');
};
};

ma​​in.jsx

import React, { Component } from 'react';
import { render } from 'react-dom';
import { TestDecorator } from '/imports/decorator.js';

import './main.html';

@TestDecorator
class FooWidget extends Component {
render() {
return <h1>FooWidget</h1>;
}
}

Meteor.startup(function() {
render(<FooWidget/>, document.getElementById('root'));
});

.babelrc

{
"plugins": ["transform-decorators-legacy"]
}

关于meteor - Meteor 1.4 中的装饰器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38689684/

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