Как вызвать реакцию-модал из rails-assets.org в компоненте ретрансляторов

Question

У меня есть приложение для рельсов, которое использует реакцию на лицевой стороне, но у меня возникают проблемы с добавлением других компонентов реакции к моим компонентам. Я использую react-rails для включения реакции в приложение для рельсов. Я хотел бы добавить react-modal к компоненту. Я использовал rails-assets, чтобы добавить реакцию-модальный как драгоценный камень, но мне не удается вызвать реакцию-модальность в моем компоненте. Я надеялся, что это будет похожий вызов React.DOM, но это, похоже, не так.

Я не могу использовать обычный синтаксис require() из-за звездочек, и я хотел бы использовать рельсы-активы, а не браузеры/решения для веб-пакетов.

Поэтому, чтобы быть ясным, я хочу отобразить модальный компонент в своем компоненте, и на данный момент я получаю сообщение об ошибке, которое говорит: «Модаль не определен». Спасибо за любую помощь.

Это рельсы-активы источников перл:

### 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" 

Answer 1

Когда вам требуется компонент с помощью звездочки Он будет доступен в качестве глобального объекта, то компонент будет иметь такое же имя пакета, например:

Если вы используете react-modal-bootstrap

//= require react-modal-bootstrap

компонент будет доступен:

<ReactModalBoostrap.Modal />

Он должен работать так же для модального вы используете, так что вместо того, чтобы использовать <Modal /> вы должны использовать <ReactModal.Modal />

Также не забудьте перезагрузить сервер после запуска bundle install

Answer 2

Обычно, когда я использую React с Rails, Я буду придерживаться такого шаблона:

В моей application.html.erb

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

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

Это один <div> будет то, что я прилагаю мой весь Реагировать приложение к. Так как представления Rails часто имеют различные маршруты, я буду обращаться с маршрутизацией в моем app.js с чем-то вроде этого, только делаю то, что мне нужно, когда мне это нужно:

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

Если вы не хотите, чтобы следовать шаблон, подобный этому, одно предложение, которое я хотел бы сделать, - убедиться, что вы требуете в Modal в свой конкретный компонент, а не только App.js.