ruby-on-rails - 在 React 组件中使用 Rails 数据作为 defaultProps

Question

我正在使用 react-rails(使用 sprockets 而不是 webpack，如果它被证明是相关的)，试图为庞大的 rails 应用程序制作一个可重用的组件。它基本上是一个导航栏，我们有一个我们通常想要显示的链接列表，但我们还需要能够在某些页面上覆盖该列表。

到目前为止一切顺利。然而!

我们将链接数组保存为我们的 Rails 应用程序中的常量，理想情况下，默认链接将是 React 组件的 defaultProps。我们不想在 React 组件中复制该信息，因为制作此组件的全部意义在于我们正在努力实现一致性，如果我们需要进行更新，希望我们只在一个地方进行更新.

所以这是一个选项:

<%= react_component "Navbar", links: navbar_default_links, other_settings: true, etc: false %>


但必须在每个页面上都这样做似乎并不优雅，而实际上我们只是想在链接与通常的链接不同时发出警告。

有谁知道使用 react-rails 将信息从 Rails 提取到 react 组件定义中的方法吗？或者其他解决方案？

(编辑:要清楚，这不需要是来自 rails 数据库的信息)

Answer 1

以下是我所知道的在 Rails 和 React 之间共享常量的通信方式。

选项 #1:包装 react_component

def render_navbar(props = {}, options = {})
  react_component 'Navbar', {links: navbar_default_links}.merge(props), options
end

选项 #2:(如果您使用 Webpack)在 JSON 或 YAML 中声明 Rails 和您的 bundler 都可以使用的链接。

# The file that used to define the constant
def navbar_default_links
  JSON.load(File.read(Rails.root.join('path/to/your/file.json')))
end

// In `Navbar.js`, using json-loader
import navbarDefaultLinks from './path/to/navbar_default_links.json';

选项 #3(如果您使用 Assets 管道)将 .erb 添加到您的 JS 文件并使用常量

// Navbar.js.erb
const defaultProps = <%= MyModule::NAVBAR_DEFAULT_LINKS %>

选项 #4 通过像 window 这样的全局对象进行通信。它打破了封装但是嘿🤷‍♂️在application.html.erb

<script>
  window.navbar_default_links = <%= MyModule::NAVBAR_DEFAULT_LINKS %>
</script>
<%= `window.navbar_default_links` must be above this line %>
<%= javascript_pack_tag 'application' %>

// In `navbar.js`
const navbarDefaultLinks = window.navbar_default_links