当前未启用对实验性语法 'decorators-legacy' 的支持如何在 Create React App 中启用？

Question

我正在尝试起床并运行做出反应创建应用程序和 mobx 状态树。我不断得到

Support for the experimental syntax 'decorators-legacy' isn't currently enabled (4:1):

我从未使用过 react create app，所以我不确定如何启用，我尝试制作一个 .babelrc 文件，但这没有帮助

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }]
    ]
}


import React, { Component } from "react";
import { observer, inject } from "mobx-react";

@inject("domainStores")
@observer
export default class MainComponent extends Component {
  async componentDidMount() {}

  render() {
    return <div className="main-container">
            helllo

    </div>;
  }
}

如果事情发生了变化，我也乐于接受建议，我还没有使用最新版本的 Mobx 状态树那么多现在有更好的方法吗？

Answer 1

CRA 不允许您扩展自己的配置，因此，为了扩展 cra 配置，您将不得不使用 customize-cra 和 react-app-rewired。

所以，请按照以下步骤操作：

使用 npm 或 yarn 安装 customize-cra、react-app-rewired 和 @babel/plugin-proposal-decorators
在项目的根级别添加 config-overrides.js 并粘贴下面给出的代码：

const {override, addDecoratorsLegacy } = require('customize-cra');
module.exports = override(addDecoratorsLegacy());

将 package.json 脚本更新为以下脚本：

"start": "react-app-rewired start",
"build": "react-app-rewired build"

P.S：如果你想使用 babel 配置那么你的 config-overrides.js 应该是这样的：

const {override, addDecoratorsLegacy, useBabelRc } = require('customize-cra');
module.exports = override(addDecoratorsLegacy(), useBabelRc());

useBabelRc 将自动从您的项目根目录加载配置。

Answer 2

如果你只使用 MST 而没有常规的 MobX 东西并且只需要 inject 和 observer 那么你可以使用常规函数语法，它看起来不太好，但不需要任何设置：

export const WrappedComponent = inject("domainStores")(observer(Component)
// Or use export default here if you prefer

如果您正在使用 MobX 的其他功能，那么在 MobX 6 中有一个新功能可能允许您完全删除装饰器（如 computed、action 等），makeAutoObservable:

import { makeAutoObservable } from "mobx"

class Store {
  // Don't need decorators now
  string = 'Test String';

  setString = (string) => {
    this.string = string;
  };

  constructor() {
    // Just call it here
    makeAutoObservable (this);
  }
}

有了它，您甚至不需要启用装饰器语法。

这里有更多信息 https://mobx.js.org/migrating-from-4-or-5.html 和 https://mobx.js.org/react-integration.html

Answer 3

您可以使用 observer 作为组件的函数而不是装饰器，而不是使用旧的装饰器提案。

我们也可以使用 React 自己的上下文来代替 inject，如 the documentation states:

Note: usually there is no need anymore to use Provider / inject in new code bases; most of its features are now covered by React.createContext.

这样我们就可以按原样使用Create React App了。

例子

import React from "react";
import { observer } from "mobx-react";
import { types } from "mobx-state-tree";

const StoresContext = React.createContext("store");

// custom hook that we can use in function components to get
// the injected store(s)
function useStore() {
  return React.useContext(StoresContext);
}

const StoreModel = types.model({
  things: types.array(types.string)
});
const storeInstance = StoreModel.create({ things: ["foo", "bar"] });

// instead of using the @observer decorator, we can use observer as
// a function and give it a component as argument
const MainComponent = observer(() => {
  const store = useStore();
  return (
    <div>
      {store.things.map((thing) => (
        <div key={thing}>{thing}</div>
      ))}
    </div>
  );
});

export default observer(function App() {
  return (
    <StoresContext.Provider value={storeInstance}>
      <MainComponent />
    </StoresContext.Provider>
  );
});

当前未启用对实验性语法 'decorators-legacy' 的支持如何在 Create React App 中启用？

Support for the experimental syntax 'decorators-legacy' isn't currently enabled How To Enable In Create React App?

reactjs

mobx

mobx-state-tree

react-create-app

当前未启用对实验性语法 'decorators-legacy' 的支持 如何在 Create React App 中启用？

Support for the experimental syntax 'decorators-legacy' isn't currently enabled How To Enable In Create React App?

reactjs

mobx

mobx-state-tree

react-create-app

当前未启用对实验性语法 'decorators-legacy' 的支持如何在 Create React App 中启用？