0

我为我的项目设置了React on Rails 。我有一个渲染 React 组件的 haml 模板：

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

div在可行的情况下，react 组件将在具有唯一 id like的 a 内部呈现，并且在它旁边MyComponent-react-component-0b88d3fe-e457-4bec-b2a1-119097662161会有一个带有 id 的标签。在不起作用的情况下（在块内），具有唯一 id 的 div 会被渲染，但它是空的，并且DOM 中不会出现脚本标签。scriptjs-react-on-rails-contextcapture_hamljs-react-on-rails-context

不可能在capture_haml这样的块内使用 React on Rails 组件，还是我只是做错了什么？

4

1 回答 1

2

我知道这已经有一段时间了，但我也遇到了一个问题，即问题中描述的内容在 DOM 上，但反应组件没有在浏览器上呈现。我认为在这种情况下，您需要通过以下方式预渲染反应组件；

= react_component('EliteSellerBadge', prerender: true)

就我而言，具有我需要呈现的组件的视图是使用 xhr 请求和 jqueryreplaceWith方法添加的。

希望这对某人有所帮助。

windowPS：如果您在 React 组件中引用全局对象，则可能会遇到预渲染问题document。

于 2021-03-10T11:56:08.223 回答