如何在 react-rails 组件中从 rails-assets.org 调用 react-modal答案

【问题标题】：How to call react-modal from rails-assets.org in react-rails component如何在 react-rails 组件中从 rails-assets.org 调用 react-modal
【发布时间】：2016-06-16 10:03:05
【问题描述】：

我有一个在前端使用 react 的 rails 应用程序，但在向我的组件中添加其他 react 模块时遇到问题。我正在使用 react-rails 将 react 合并到我的 rails 应用程序中。我想将react-modal 添加到组件中。我已经使用 rails-assets 将 react-modal 添加为 gem，但是在我的组件中调用 react-modal 时遇到问题。我希望这将是一个与 React.DOM 类似的调用，但似乎并非如此。

由于 sprockets，我不能使用正常的 'require()' 语法，我想坚持使用 rails-assets 而不是 browserify/webpack 解决方案。

所以为了清楚起见，我想在我的组件中显示模态，到目前为止，我收到一个错误，上面写着“未定义模态”。感谢您的帮助。

这是来自 rails-assets 的 gem：

### Rails Assets Gems
source 'https://rails-assets.org' do
  gem 'rails-assets-react-modal'
end

应用程序.js

//= require react
//= require react_ujs
//= require react-modal
//= require components

这是我的组件：

customStyles = content:
  top: '50%'
  left: '50%'
  right: 'auto'
  bottom: 'auto'
  marginRight: '-50%'
  transform: 'translate(-50%, -50%)'

DOM = React.DOM
@EntityBulkTracker = React.createClass
  displayName: 'EntityBulkTracker'

  getInitialState: ->
    entity: @props.entity
    modalIsOpen: true

  openModal: (e) ->
    @setState modalIsOpen: true

  closeModal: (e) ->
    @setState modalIsOpen: false

  render: ->
    DOM.div null,
      Modal
        isOpen: @state.modalIsOpen
        onRequestClose: @closeModal
        style: "#{customStyles}"

        DOM.h2 null,
          "Hello"
        DOM.input
          type: 'button'
          onClick: @closeModal
        DOM.div null,
          "I am a modal"

【问题讨论】：

您是否尝试过使用不同的 Modal 组件 - 这是我使用过的一个效果很好的组件：github.com/mxenabled/mx-react-components 我在 Rails 后端和 React 前端做了很多工作，并且有一些有趣的障碍。我从未使用过 React-Rails，但通常我会执行以下操作：

标签： ruby-on-rails reactjs react-rails rails-assets

【解决方案1】：

当您需要使用 sprockets 的组件时，它将作为全局对象提供，该组件将具有与包相同的名称，例如：

如果您使用的是react-modal-bootstrap

//= require react-modal-bootstrap

可用的组件是：

<ReactModalBoostrap.Modal />

它应该与您使用的模式相同，因此您应该使用<Modal /> 而不是<ReactModal.Modal />

还记得在运行bundle install后重启你的服务器

【讨论】：

【解决方案2】：

通常，当我将 React 与 Rails 一起使用时，我会遵循这种模式：

在我的 application.html.erb 中

    <div id="react-app"> </div>

    <div class="main-content">
      <%= yield %>
       <%= javascript_include_tag 'bundle' %>
    </div>

<div> 将是我将整个 React 应用程序附加到的那个。由于 Rails 视图通常有不同的路由，我将在我的 app.js 中使用类似这样的方式处理路由，仅在需要时渲染我需要的内容：

      _renderSpecificComponents () {
        return (
          window.location.pathname === '/users/sign_in' ? (
            <Login />
          ) : (
            <Header />
          )
        );

如果您不想遵循这样的模式，我的一个建议是确保您在 Modal 中要求您的特定组件，而不仅仅是 App.js。

【讨论】：