具有反應性的不引人注目的JS

Question

我目前正在將Rails與ReactJS前端一起使用。 我的大部分JS都放在適當的.js.jsx文件中，但是，我將它放在script.tag下的index.html.erb中：

React.render(
    React.createElement(CommentBox, {url: "/demo"}),
            document.getElementById('content')
        );
</script>

在這種配置下，它可以完美工作。

我欣賞通常的“ Rails Way”是不引人注目的JS，但是我很難做到這一點。 如果我只是將上面的代碼移動到我的主.js文件中，則它將在content元素存在之前加載，並且什么都不呈現。

實際上，React-rails為不打擾的JS提供了一個特殊的寶石，但是我有兩個問題。 首先，文檔沒有涉及如何實際附加URL標記，因此這些都不起作用（沒有錯誤，只有任何內容都沒有呈現）：

<% react_component('CommentBox', url: '/demo') %>
<div data-react-class="CommentBox" data-react-props="url: /demo" />

然而，更大的問題是react-ujs gem的工作方式是在body close標簽之前自動嵌入幾百行JavaScript。 這並沒有比我開始使用的四行嵌入式線那么吸引人，或者對其進行了任何改進。

假設我可以解決第一個問題，就為什么這種方法會更好，我是否有所遺漏？

是否有辦法將其移入主.js文件並仍然呈現？ 我可以將其移到專用的.js文件中，並在content標記后調用它，但這與資產管道混在一起，並用對另一個完整文件的調用替換了四行嵌入式腳本。

半數的Rails社區都將這種嵌入式腳本稱為異端，但它始終看起來像是最有效的解決方案。

Answer 1

關於您的React-Rails組件，似乎您只是缺少該組件實際渲染的等號。

應該是這樣的：

<%= react_component('CommentBox', url: '/demo') %>

相反，您有：

<% react_component('CommentBox', url: '/demo') %>

使用Rails實際上並不會在頁面上呈現任何內容。

Answer 2

如果我只是將上面的代碼移動到我的主.js文件中，則它將在content元素存在之前加載，並且什么都不呈現。

您可以嘗試執行以下操作：

document.addEventListener("DOMContentLoaded", function(event) {
  React.render(React.createElement(CommentBox, { url: '/demo' }),
               document.getElementById('content')
  );
});

我認為不打擾的方法是否“更好”是一個主觀的問題。 我現在仍處於將React.js與Rails一起使用的“擬定”階段，我還沒有決定要做什么。 我有點喜歡低調的風格，但是react_ujs.js取決於全局命名空間中的所有內容，而且我還在嘗試將資產管理切換到webpack / npm，並且在那里的所有內容都得到了很好的調制（總體而言，我喜歡但它對react_ujs很糟糕）。