带有反应轨道的不显眼的JS

Unobtrusive JS with react-rails

本文关键字：不显眼 JS 轨道 有反应      更新时间：2023-09-26

我目前正在使用带有ReactJS前端的Rails。我的大部分 JS 都在适当的 .js.jsx 文件中，但是，我将其放在脚本标记下的 index.html.erb 中：

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

在这种配置下，它可以完美运行。

我很欣赏通常的"Rails Way"是不显眼的JS，但我很难做到这一点。如果我只是将上面的代码移动到我的主.js文件中，它会在内容元素存在之前加载，并且不渲染任何内容。

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文件中，并在内容标记之后调用它，但这会扰乱资产管道，并将四行嵌入式脚本替换为对另一个完整文件的调用。

一半的rails社区会称这种嵌入式脚本为异端，但它看起来是最有效的解决方案。

关于你的 React-Rails 组件，似乎你只是缺少组件实际渲染的等号。

应该是这样的：

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

相反，你有这个：

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

这实际上并没有用 Rails 向页面渲染任何东西。

如果我只是将上面的代码移动到我的主.js文件中，它会在内容元素存在之前加载并且不渲染任何内容。

您可以尝试执行以下操作：

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来说很糟糕）。

相关文章：