4

我正在尝试使用 react create app 和 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 状态树这么多，现在有更好的方法吗？

4

3 回答 3

0

除了使用旧的装饰器提案，您可以将observer其用作组件上的函数而不是装饰器。

inject正如文档所述，我们还可以使用 React 自己的上下文而不是：

注意：通常在新的代码库中不再需要使用Provider/ ；inject它的大部分功能现在都被 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>
  );
});
于 2020-12-06T21:29:36.090 回答
0

如果你只使用 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

于 2020-12-06T09:38:58.247 回答
-1

CRA 不允许您扩展自己的配置，因此，为了扩展 cra 配置，您必须使用customize-crawith react-app-rewired.

因此，请按照以下步骤操作：

  1. 安装customize-cra，react-app-rewired并@babel/plugin-proposal-decorators使用 npm 或 yarn
  2. config-overrides.js在项目的根级别添加并粘贴下面给出的代码：
const {override, addDecoratorsLegacy } = require('customize-cra');
module.exports = override(addDecoratorsLegacy());
  1. 将 package.json 脚本更新为以下脚本：
"start": "react-app-rewired start",
"build": "react-app-rewired build"

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

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

useBabelRc 会自动从你的项目根目录加载配置。

于 2020-12-05T19:55:55.603 回答