Reactjs 如何让MobX装饰器与CreateReact应用程序v2配合使用？

当前未启用对实验语法“decorators legacy”的支持

我尝试在

.babelrc

中添加

decorators legacy

和

@babel/plugin提案decorators

和

{legacy:true}

，但没有效果

有人设法让MobX装饰器使用CRA2吗？

npm run eject

在第162行附近的/config/webpack.config.dev.js中添加粗体行。确保在/config/webpack.config.prod.js上执行相同的操作，否则应用程序将无法生成

---

插件：[“@babel/plugin-proposition-decorators”，{“legacy”：true}]，我也有同样的问题，最后使用了mobx4，其中decorators可以在没有decorator语法的情况下使用

class Store {
  //...
  @action empty() {
    this.data = []
  }

  @action add(e) {
    this.data.push(e)
  }
}

可以重写为

class Store {
      //...
       empty() {
        this.data = []
      }

      add(e) {
        this.data.push(e)
      }
    }

decorate(Store, {
  add: action,
  empty: action
})

您可以从CRA2开箱即用地使用此功能，而无需担心转换decoracy插件。谢谢Michel Weststrate提供的这些东西

---

使用CRA2时，要使用MOBX5，必须执行以下操作

npm install -save mobx mobx-react

现在在存储文件中添加以下行

import {decorate, observable} from "mobx"
import {observer} from "mobx-react"

现在你可以用这样的东西了

class Store {
  //...
}

decorate(Store, {
  list: observable
})

const appStore = new Store()`

---

虽然如果你想避免样板代码，其他答案是正确的，但在CRA2中使用decorators而不使用弹出是可能的，而且我用Babel 7和Mobx（使用decorators works）对App 2.0进行了一次React，而不使用弹出！：

我用于创建此项目的链接：

---

首先，安装依赖项：

纱线添加反应应用程序重新布线定制cra@babel/插件提案装饰器

其次，在根目录中创建具有以下内容的

config overrides.js

：

const {
    addDecoratorsLegacy,
    override,
    disableEsLint
} = require("customize-cra");

module.exports = {
    webpack: override(
        addDecoratorsLegacy(),
        disableEsLint()
    )
};

您现在应该可以使用mobx+装饰器了

如果尚未安装mobx，请运行：

纱线添加mobx mobx react

。

---

现在您可以使用装饰器了。

如果您使用babel 7，您必须在babelrc中添加一些配置。安装对装饰器的支持：

npm i——保存dev@babel/plugin提案类属性@babel/plugin提案装饰器

并在.babelrc文件中启用它：

    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true}],
        ["@babel/plugin-proposal-class-properties", { "loose": true}]
    ]
}

或者您可以使用MobX内置实用程序，如：

import { observable, computed, action, decorate } from "mobx";

class Timer {
  start = Date.now();
  current = Date.now();

  get elapsedTime() {
    return this.current - this.start + "milliseconds";
  }

  tick() {
    this.current = Date.now();
  }
}
decorate(Timer, {
  start: observable,
  current: observable,
  elapsedTime: computed,
  tick: action
});

---

我也遇到了同样的问题，我使用了mobx实用程序，所有的东西都完全适合我。

选项1：将装饰器与CRA v2一起使用

如果您参考，您可以使用以下方法让Mobx decorators使用CRAv2：

仅当在create react app@^2.1.1中使用TypeScript时，才支持装饰程序开箱即用

但是，在某些情况下，在将Mobx与其他react框架一起使用时，可能仍然会遇到问题。在这种情况下：

选项2：不要使用装饰器

详细的分步指南已记录在案

如果之前将观察者反应组件定义为：

@observer
export default class MyComponent extends React.Component

将其更改为：

const MyComponent = observer(class MyComponent extends React.Component{
  /* ... */
});

export default MyComponent;

myElement;

如果您以前有：

@observable myElement = null;

您需要将其更改为：

const MyComponent = observer(class MyComponent extends React.Component{
  /* ... */
});

export default MyComponent;

myElement;

然后：

---

希望这有帮助

您不必使用更多的软件包或更改配置

1-在商店中使用装饰-用于可观察、计算：

import { observable, decorate } from "mobx"

class ToDoStore {
    todos= ["cat","dog"]
}
decorate(ToDoStore, {
    todos: observable,
  });

const store = new ToDoStore()

2-对于观察者-使用以下类别样式：

import React from "react"
import { observer } from "mobx-react"

const TodoList = observer(class TodoList extends React.Component {
    render() {
        const {todos} = this.props.store;
        const todoL = todos.map(todo => (<li>{todo}</li>))
        return (
            <div>
            <h1>ToDo List</h1>
            <ul>{todoL}</ul>
            </div>
        );
    }
})
export default TodoList

从“React”导入React
从“mobx react”导入{observer}
const TodoList=observer（类TodoList扩展React.Component{
render（）{
const{todos}=this.props.store；
const todoL=todos.map（todo=>（
{todo}
）
返回(
待办事项清单
{todoL}
);
}
})
将默认值导出到列表

谢谢。除了Mobx4博客中提到的教程外，我似乎找不到其他合适的教程。你知道有什么好的资源吗？谢谢最后有人发布了一个工作示例！我以前花了不少时间在这上面，非常感谢！你在这里和你的回购协议中经常出现打字错误。这是BABEL，不是BABLE。你的项目是一个monorepo，它同时包含本机web和react本机应用程序吗？在我的情况下，“插件”下的代码块是唯一有用的（react本机0.61.5）。谢谢选项2起作用，也使它看起来更清晰！