装饰器功能不起作用（意外标记）

Question

刚刚尝试在 React 中使用装饰器：

import React from 'react';
import Fade from './Transitions/Fade'
import withVisible from './withVisible'

@withVisible()
const App = props =>
    <Fade visible={props.visible} duration={500}>
        Hello
    </Fade>

export default App

如果我使用通用方式 ( withVisible()(App) ) 那么它工作正常。（我的猜测是 NodeJS 无法使用 @ 编译我的代码）[语法错误：意外的标记 (@)]

import React from 'react'

const withVisible = () => Component =>
    class WithVisible extends React.Component {
        state = {
            visible: true
        }
        render() {
            return (
                <Component visible={this.state.visible} {...this.props}/>
            )
        }
    }

export default withVisible

Answer 1

可能是你的.babelrc 没有添加装饰器插件。试试这个：https://babeljs.io/docs/plugins/transform-decorators

Answer 2

您需要 transform-decorators-legacy babel 插件才能使此语法正常工作。

装饰器功能不起作用（意外标记）

Decorator feature not working (unexpected token)

javascript

decorator

ecmascript-next