React HOC 和装饰器的代码突出显示在 PhpStorm/WebStorm 中损坏

Question

背景

在 React 中编写包含装饰器的高阶组件时，我的突出显示在 PhpStorm/WebStorm 中被破坏。

示例代码

export default function HOC(WrappedComponent) {
    return (
        @connect(
            state => ({
                data: state.data
            })
        )
        class extends Component {/** react component **/}
    )
}

错误

这段代码在我的 React 应用程序中编译完美，但在我的 IDE 中导致了一大堆错误。

如果我删除装饰器，错误就会消失。但是，如果我在其他组件上使用装饰器，则突出显示没有问题。这意味着它不是装饰器的全球性问题。

标记的第一个错误是

) expected, line 19 (where line 19 is the end of the decorator)

这意味着return语句没有正确理解装饰器和组件的分组。

问题

有没有办法轻松解决这个问题，也许是图书馆。或者我应该改变我编写这些 HOC 的方式？

Answer 1

IDE

有问题

如上所述，此代码可以编译和运行，因为 IDE 以及它如何检测 return 装饰器的某些内容存在某种问题。

解决方法

我曾使用一种解决方法来修复代码突出显示。通过允许装饰器应用于 return 之前的 class 并添加任意名称突出显示 returns.

例子

export default function HOC(WrappedComponent) {

    @connect(
        state => ({
            data: state.data
        })
    )
    class HOC extends Component {/** react component **/}

    return HOC;
}

Answer 2

这是一个已知错误，请关注WEB-23326更新

React HOC 和装饰器的代码突出显示在 PhpStorm/WebStorm 中损坏

Code highlighting broken in PhpStorm/WebStorm with React HOC's and decorators

javascript

decorator

phpstorm

webstorm

reactjs

背景

示例代码

错误

问题

IDE

解决方法

例子