首页 文章

如何在react-rails组件中调用rails-assets.org中的react-modal

提问于
浏览 次
2

我有一个使用前端反应的rails应用程序但是我在将其他反应模块添加到我的组件时遇到了问题 . 我正在使用react-rails将react整合到我的rails应用程序中 . 我想将react-modal添加到组件中 . 我在我的组件中调用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

的application.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"
ruby-on-rails reactjs react-rails rails-assets

2 回答

  • 0

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

    如果你正在使用 react-modal-bootstrap

    //= require react-modal-bootstrap

    可用的组件将是：

    <ReactModalBoostrap.Modal />

    对于你正在使用的模态它应该是相同的，所以你应该使用 <ReactModal.Modal /> 而不是使用 <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 App的地方 . 由于Rails视图通常有不同的路由，我将在app.js中使用类似的方式处理路由，只在需要时呈现我需要的内容：

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

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

    回复于

相关问题