Question

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

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

我们在rails应用程序中将链接数组保存为常量，理想情况下，默认链接将是react组件的defaultProps。我们不想在反应组件中复制该信息，因为制作此组件的重点在于我们正在努力实现一致性，如果我们需要更新，我们希望我们能够只能在一个地方制作它们。

所以这是一个选择：

<%= 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）声明Rails和捆绑程序都可以使用的JSON或YAML中的链接。

# 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 （如果您使用Asset管道）将.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

使用Rails数据作为react组件中的defaultProps

1 个答案: