如何在erb视图页面中渲染Hyperstack组件？

前提说明 #

既然你已经在application.erb中成功嵌入过Hyperstack组件，说明项目的Hyperstack基础配置（包括客户端代码加载、服务器端设置）已经完成，以下是在目标ERB页面中渲染组件的具体步骤：

1. 添加组件挂载容器
   在ERB页面中你希望显示用户消息的位置，插入一个带唯一ID的DOM元素，作为组件的挂载节点：

<div id="user-message-mount-point"></div>

2. 定义Hyperstack用户消息组件
   在你的Hyperstack组件文件中（比如app/hyperstack/components/user_message.rb）编写组件逻辑：

class UserMessage < HyperComponent
  # 接收外部传入的消息参数
  param :content

  render do
    div(class: "user-message-card") do
      span(class: "message-label") { "系统通知：" }
      p(class: "message-content") { @content }
    end
  end
end

3. 在ERB中挂载组件
   有两种常用方式实现挂载：

方式一：直接通过脚本挂载

在ERB页面底部添加javascript_tag，调用Hyperstack的挂载方法，同时传递ERB中的变量（注意用j方法转义内容，避免XSS风险）：

<%= javascript_tag do %>
  // 挂载组件到指定DOM节点，传入消息内容
  Hyperstack.mount(
    'UserMessage',
    document.getElementById('user-message-mount-point'),
    { content: '<%= j @user_notification_content %>' }
  );
<% end %>

方式二：使用Hyperstack ERB辅助方法

如果你的项目配置了Hyperstack的ERB辅助工具，可以直接调用辅助方法简化操作，它会自动生成挂载容器和初始化代码：

<%= hyperstack_component 'UserMessage', content: @user_notification_content %>

注意事项 #

• 确保Hyperstack客户端代码已在当前ERB页面中加载（由于你已在application.erb中配置，通常通过application.js引入即可覆盖所有页面）
• 如果需要动态更新消息内容，可以结合Hyperstack的状态管理（比如state）或通过重新传递props实现
• 始终对ERB中传递给组件的变量进行转义处理，防止跨站脚本攻击

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