如何在react-rails组件中从rails-assets.org调用react-modal [英] How to call react-modal from rails-assets.org in react-rails component

问题描述

我有一个在前端使用react的Rails应用程序，但是我无法在组件中添加其他react模块.我正在使用 react-rails 将React整合到我的Rails应用程序中.我想将反应模式添加到组件中.我已经使用过rails-assets来将react-modal添加为gem，但是在我的组件中调用react-modal时遇到了麻烦.我希望这会像React.DOM这样的类似调用，但事实并非如此.

I have a rails app that uses react on the front end but I'm having trouble adding other react modules to my components. I am using react-rails for incorporating react into my rails app. I would like to add react-modal to a component. I've used rails-assets to add react-modal as a gem but I'm having trouble calling react-modal in my component. I was hoping it would be a similiar call as React.DOM but that hasn't seemed to be the case.

由于链轮的缘故，我无法使用常规的'require()'语法，我想坚持使用Rails-assets，而不是browserify/webpack解决方案.

I can't use the normal 'require()' syntax due to sprockets and I would like to stick with rails-assets rather than browserify/webpack solutions.

因此，为了清楚起见，我想在组件中显示模态，到目前为止，我收到一个错误消息，提示未定义模态".感谢您的帮助.

So just to be clear I want to display the modal in my component and as of now I get an error returned that says 'Modal is not defined'. Thanks for any help.

这是来自rails-assets的宝石:

This is the rails-assets sourced gem:

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

Application.js

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"

推荐答案

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

When you require a component using sprockets It will be available as a global object, the component will have the same name of the package, e.g:

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

//= require react-modal-bootstrap

可用的组件将是:

<ReactModalBoostrap.Modal />

<ReactModalBoostrap.Modal />

它对于您使用的模态应该是相同的，因此应该使用<ReactModal.Modal />

It should work the same for the modal you're using, so instead of using <Modal /> you should be using <ReactModal.Modal />

还请记住在运行bundle install

这篇关于如何在react-rails组件中从rails-assets.org调用react-modal的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！