如何通过react-rails将Rails数据设为React组件的defaultProps？

针对你用react-rails（基于Sprockets）开发大型Rails应用导航栏的需求，这里有两个优雅的方案，既能让React组件复用Rails里的常量链接作为默认值，又不用在每个页面重复传递props：

方案1：将Rails常量注入全局window对象，作为React组件的defaultProps #

这个方案直接让React组件从全局环境获取默认链接，省去视图层的重复传递：

步骤1：在Rails中暴露常量到全局 #

创建一个ERB格式的JS文件，把Rails里的常量序列化为JSON并挂载到window对象：

// app/assets/javascripts/navbar_defaults.js.erb
window.navbarDefaultLinks = <%= Navbar::DEFAULT_LINKS.to_json.html_safe %>;

记得在application.js里引入这个文件：

// app/assets/javascripts/application.js
//= require navbar_defaults

步骤2：在React组件中设置defaultProps #

直接用全局变量作为组件的默认props：

// app/assets/javascripts/components/Navbar.jsx
class Navbar extends React.Component {
  static defaultProps = {
    links: window.navbarDefaultLinks,
    otherSettings: true,
    etc: false
  };

  render() {
    const { links } = this.props;
    return (
      <nav>
        {links.map(link => (
          <a key={link.id} href={link.path}>{link.label}</a>
        ))}
      </nav>
    );
  }
}

使用方式 #

普通页面无需传递links，组件会自动用默认值：

<%# 常规页面 %>
<%= react_component "Navbar" %>

需要自定义链接的页面，只需要覆盖links参数：

<%# 需要自定义导航的页面 %>
<%= react_component "Navbar", links: custom_navbar_links %>

方案2：封装Rails Helper统一处理默认props #

如果你不想暴露全局变量，更倾向于在Rails后端控制组件的默认参数，可以封装一个Helper方法：

步骤1：创建自定义Helper #

在app/helpers/application_helper.rb中添加：

module ApplicationHelper
  def navbar_component(options = {})
    # 合并默认参数和传入的参数，传入的参数会覆盖默认值
    default_options = {
      links: Navbar::DEFAULT_LINKS,
      other_settings: true,
      etc: false
    }
    react_component "Navbar", default_options.merge(options)
  end
end

使用方式 #

在视图里直接调用这个Helper，默认情况不用传任何参数：

<%# 常规页面 %>
<%= navbar_component %>

需要自定义时，只传需要覆盖的参数：

<%# 自定义链接+修改其他设置 %>
<%= navbar_component links: custom_navbar_links, other_settings: false %>

注意事项 #

• 确保Rails中的Navbar::DEFAULT_LINKS是可序列化为JSON的结构（比如数组包含字符串或简单哈希），避免序列化错误。
• 方案1的全局变量如果担心命名冲突，可以用更独特的命名（比如MyAppNavbarDefaults）。
• 两种方案都能保证默认链接的一致性，因为都依赖同一个Rails常量，修改常量后所有使用默认值的页面都会自动更新。

内容的提问来源于stack exchange，提问作者Clara B