Question

我对使用@myDecorator语法（使用babel）的能力感到非常兴奋。我试图装饰其中一个生命周期函数，特别是componentWillMount，并检查装饰器中组件的props和context。但是，我似乎无法访问props或context。我不确定这是否是一种反模式，或者我是否只是出错了。

小例子：

// TestComponent.jsx
import checkProps from 'checkProps.js';

class TestComponent extends React.Component {
    @checkProps
    componentWillMount() {
        // Do something.
    }

    render() {
       return <div>My Component</div>
    } 
}

和

// checkProps.js
export function checkProps(target) {
    console.log(target.props);
}

我也尝试过装饰器的箭头函数并检查this，但我不认为装饰器会以这种方式组合起来。

我还尝试将装饰工具作为工厂并传入this.props和this.context，但在装饰组件生命周期函数时未定义this。

Answer 1

~~ES7~~ ECMAScript装饰器有the same API as Object.defineProperty(target, name, descriptor)所以target参数是你的装饰器应用时的类，而不是{{1}调用它时的类}。要影响装饰器在运行时所做的事情，你必须修改React这是装饰的实际功能：

descriptor.value

这里an example that also modifies the behavior of a method更彻底地证明了这一点。

希望这会有所帮助。快乐的编码！

编辑：正如评论者指出的那样，装饰者不是ES7的一部分，但截至2016年3月the proposal is still in Stage 1，我的不好

EDIT2：截至2018年6月，提案已在the proposal is still in Stage 2，我们越来越近了

具有React组件的装饰器

1 个答案: