你如何将 mobx 与 react rails 一起使用？答案

【问题标题】：How do you use mobx with react rails?你如何将 mobx 与 react rails 一起使用？
【发布时间】：2016-08-30 04:28:43
【问题描述】：

在尝试使用react-rails 时，我遇到了将mobx 作为状态管理合并到我的应用程序中的问题。

我的印象是 rails 资产管道会引入 mobx 来做出反应，但是，这并没有成功。我正在使用 react-rails gem 并尝试将 mobx 合并到组件文件夹中的 react.es6.jsx 工作表中。

我的 package.json 文件：

{
  "name": "rent-pseudo",
  "version": "1.0.0",
  "description": "== Zipqode",
  "main": "index.js",
  "dependencies": {
    "babel-plugin-syntax-async-functions": "^6.3.13",
    "babel-plugin-transform-regenerator": "^6.3.18",
    "babel-polyfill": "^6.3.14",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "babelify": "^7.2.0",
    "bourbon": "^4.2.7",
    "bourbon-neat": "^1.8.0",
    "browserify": "^13.1.0",
    "browserify-incremental": "^3.1.1",
    "font-awesome": "^4.6.3",
    "graphql": "^0.6.2",
    "mobx": "2.4.1",
    "mobx-react": "^3.5.3",
    "mobx-react-devtools": "^4.2.5",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-google-maps": "^4.11.0",
    "react-router": "2.6.1",
    "es6-promise": "^3.0.2",
    "fetch": "^0.3.6",
    "jquery": "^2.1.4",
    "jquery-ujs": "^1.0.4"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://alexung@github.com/alexung/rent-pseudo.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/alexung/rent-pseudo/issues"
  },
  "homepage": "https://github.com/alexung/rent-pseudo#readme"
}

我的第一个反应文件包含在/components：

import { observer } from 'mobx-react'

const SearchResultsLayout = observer(React.createClass({
  render: function() {
    return (
      <h1>Hello, World</h1>
    )
  }
}))

但我不断收到错误VM3275:1 Uncaught ReferenceError: SearchResultsLayout is not defined

有什么想法吗？

【问题讨论】：

为什么需要这个package.json 文件？我认为react-rails 不需要它们。
SearchResultsLayout is not defined 听起来像mobx 本身正在工作（否则你会得到一个observer not defined）。您的组件调用站点上的导入语句是否正确？
@mweststrate 你好！顺便说一句，我喜欢 mobX——我正在公司的一个项目中工作，但这更多是为了我个人的事情。对于如何将东西导入rails，我实际上非常天真。我为 React 所做的是使用 react-rails gem 创建一个组件文件夹，我可以在其中放置我的反应文件。但是，我对如何将 mobx 合并到其中感到困惑。当我尝试加入观察者时，我确实收到了observer not defined 错误。
我真的不知道。零经验的rails，下面的答案可能更有用;-)。

标签： javascript ruby-on-rails ruby reactjs mobx

【解决方案1】：

看来你要么没有通过在你的 jsx 文件中声明 React

import React from 'react'

或者mobx包没有安装

【讨论】：

感谢您的评论——但是我在哪里声明呢？我已经下载了下面提到的 mobx 包，但无济于事。
当我尝试在我的 jsx 文件顶部导入时，我得到 VM9182:1 Uncaught ReferenceError: [insert component name] is not defined

【解决方案2】：

对于那些有兴趣了解的人，react_on_rails gem 更适合整合 mobx。今天早上只需将 gem 和 npm 安装 mobx 安装到我的 package.json 中即可工作，它包含在 client 文件夹中

【讨论】：

我为使用 rails、react 和 mobx 创建了一个样板。 github.com/ankitsinghaniyaz/react-rails-mobx-boilerplate
谢谢@AnkitSinghaniya！
如何将任何参数从 rails 传递给 mobx 可观察变量？
它们可以在 react_component 的 props 对象中传递（即 react_component('Test', props: { dummy: your_rails_instance_var_here })，然后你会在 react 端像这样接收它们。 props.dummy。从那里，您可以使用 this.props.dummy 实例化一个 mobx 可观察变量
如果你的 mobx 观察者变量在一个单独的函数中，你需要将你的 react 组件包装在一个生成器函数中，并使用 rails 参数初始化 mobx 存储，请参阅github.com/ankitsinghaniyaz/react-rails-mobx-boilerplate/pull/2/…

【解决方案3】：

您可以使用 rails assets 中的mobX。 https://rails-assets.org/#/?query=mobx

【讨论】：

感谢您的回复。我尝试在我的 gemfile 中包含这个 gem，然后从我的 react 文件中再次调用观察者，但无法获得结果，我仍然收到 SearchResultsLayout.js?body=1:1 Uncaught ReferenceError: observer is not defined 错误。 gem 也没有关于如何包含资产的明确说明。将 gem 简单地包含在我的 gemfile 中还有哪些进一步的步骤？
您的 application.js 中是否需要 mobX？
你的建议能更明确一点吗？我如何要求它？ a //= require mobx 破坏了我的页面。