问题
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.
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.
This is the rails-assets sourced 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
This is my component:
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"
回答1:
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:
If you're using react-modal-bootstrap
//= require react-modal-bootstrap
The component available will be:
<ReactModalBoostrap.Modal />
It should work the same for the modal you're using, so instead of using <Modal />
you should be using <ReactModal.Modal />
Also remember to restart your server after you run bundle install
回答2:
Typically when I use React with Rails, I'll follow this sort of pattern:
In my application.html.erb
<div id="react-app"> </div>
<div class="main-content">
<%= yield %>
<%= javascript_include_tag 'bundle' %>
</div>
That one <div>
will be what I append my entire React App to. Since Rails views often have different routes, I'll handle the routing in my app.js with something like this, only rendering what I need when I need it:
_renderSpecificComponents () {
return (
window.location.pathname === '/users/sign_in' ? (
<Login />
) : (
<Header />
)
);
If you don't want to follow a pattern like this, one suggestion I would have is to make sure you're requiring in the Modal into your specific component and not just App.js.
来源:https://stackoverflow.com/questions/35766074/how-to-call-react-modal-from-rails-assets-org-in-react-rails-component