Блог

Для моего проекта настроен React on Rails. У меня есть шаблон haml, который отображает компонент React:

 -# my_template.haml

%div
  = react_component('MyComponent')
  

Теперь, если я визуализирую этот шаблон внутри другого шаблона, он работает так, как ожидалось, и я вижу визуализированный компонент React.

 -# my_other_template.haml

%div
  = render 'my_template'
  

Однако, если я ссылаюсь на компонент или шаблон, который отображает компонент внутри capture_haml блока, он не отображается:

 -# my_other_template.haml

- captured = capture_haml do
  -# This does not work
  = react_component('EliteSellerBadge')

  -# This does not work
  = render 'my_template'

%div
  -# This works 
  = react_component('EliteSellerBadge')

  -# This works
  = render 'my_template'

  -# This does not work
  = captured
  

В тех случаях, когда это работает, компонент react будет отображаться внутри a div с уникальным идентификатором like MyComponent-react-component-0b88d3fe-e457-4bec-b2a1-119097662161 и будет иметь script рядом с ним тег с идентификатором js-react-on-rails-context . В тех случаях, когда это не работает (внутри capture_haml блоков), отображается div с уникальным идентификатором, но он пустой, и js-react-on-rails-context в DOM не отображается тег script.

Невозможно ли использовать компонент React on Rails внутри такого capture_haml блока, или я просто делаю что-то не так?

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

 = react_component('EliteSellerBadge', prerender: true)
  

В моем случае представление, в котором был компонент, который мне нужно было отобразить, было добавлено с помощью запроса xhr и replaceWith метода jquery.

Надеюсь, это кому-то поможет.

PS: У вас могут возникнуть проблемы с prerender, если вы ссылаетесь на глобальные объекты, такие как window и document в ваших компонентах react.