Question

我了解到，由于Babel不支持开箱即用的装饰器（因为它处于定义的早期阶段），因此create-react-app也不支持它。

我知道您可以弹出生成的应用程序并将Babel配置为支持它们，但是我不想这样做。

最后，借助MobX之类的库，您可以借助装饰工具的行为而无需实际使用装饰器的行为，例如https://mobx.js.org/best/decorators.html

React是否有类似的东西？

Answer 1

是的，可以，但是您需要做一些事情，

确保已安装this answer和react-app-rewired，以便您可以覆盖Webpack和babel配置

安装customize-cra

并更新您的Set-Content文件：

@Query("select s from SomeEntity s "
        + "where (s.description is null or s.description = :description) "
        + "and (s.name is null or s.name = :name) "
List<SomeEntity> find(String description, String name);

Answer 2

还可以通过将tsconfig.json文件添加到项目中来将装饰器与create-react-app结合使用，这意味着启用对打字稿的支持。

您需要将experimentalDecorators设置为true在tsconfig.json的编译器选项中

希望我们知道.js和.tsx文件可以共存，因此无论我们要使用装饰器的哪个文件，我们都可以将其转换为.tsx其余的可以保留.js文件

{
    "compilerOptions": {
        "target": "esnext",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react",
        "noImplicitThis": false, 
        "experimentalDecorators": true,  //<---- 
        "types": ["cypress"]
    },
    "include": ["src"]
}

可以在create-react-app中使用装饰器吗？

2 个答案: