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

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

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

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

Это драгоценный камень рельсовых активов:

### 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"
Источник

2 ответа

Решение

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

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

//= require react-modal-bootstrap

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

<ReactModalBoostrap.Modal />

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

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

Источник

Обычно, когда я использую 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 />
          )
        );

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

Источник
Другие вопросы по тегам