如何解决在 Rails 中，如何以 HTML 形式访问服务器端呈现的 React 组件
上下文
我正在尝试将 React 组件转换为 PNG，以便我可以将其附加到 Rails 邮件程序中的电子邮件中。组件是一个饼图 Rechart。
我想在 Rails 中完成这一切，而不是使用 Node.js 服务器解决方案，而是使用诸如 repng 之类的东西将组件转换为 PNG。
Rechart 将图表组件加载为 SVG，因此我可以访问 SVG 并使用 Mini-Magic 之类的东西将其转换为 PNG。
问题
如何在服务器端将 React 组件加载为 HTML 以便访问 SVG 进行转换。
要在服务器端加载 Rails 中的组件，我们可以执行 what react-rails suggests：
在视图中
<%= react_component('HelloMessage',{name: 'John'},{prerender: true}) %>
或在控制器中
class TodoController < ApplicationController
def index
@todos = Todo.all
render component: 'TodoList',props: { todos: @todos },tag: 'span',class: 'todo'
end
end
我想在使用 this posts suggests 时做一些类似于 ReactDOMServer 的事情。
// Renders our Hello component into an HTML string
const html = ReactDOMServer.renderToString(<Hello />);
我需要在 Rails 邮件程序中使用 Ruby 进行等效操作。如何以 HTML 形式访问服务器端呈现的组件？
编辑：
sig 的回答是正确的，因为它允许您访问控制器实例的 HTML，这对我有用：
controller_instance = ComponentsController.new()
html_string = controller_instance.render_to_string(:action => "index",:layout => false)
然而，html_string 的输出是：
"<div data-react-class=\"personnel/TrainingStatusChart\" data-react-props=\"{"MetaData":{"currentPage":1,"scopedCount":23,"statusGreyCount":15,"statusHighCount":5,"statusLowCount":2,"statusMediumCount":1,"totalCount":23,"totalPages":1,"unscopedCount":23},"prerender":true}\"></div>\n"
它是包含所有道具的 React 组件。预渲染 React 组件不会在服务器端将其编译为 HTML。因此，无法在 React 组件中访问 SVG 以转换为 PNG。 This article 是这样写的：
此预渲染过程无权访问窗口或文档，因此不会加载运行时 JavaScript 或 CSS。
我仍然相信这一定是可能的。也许以某种方式使用 Capybara 和 Headless Chrome 来渲染 React 组件。但是，我无法找到此示例的实现。
解决方法
您可以尝试使用控制器的 render_to_string 方法：
controller_instance = ActionController::Base.new()
#or
controller_instance = ApplicationController.new()
html_string = controller_instance.render_to_string template: 'path_to_file'
它接受与 render 相同的参数。更多信息https://apidock.com/rails/ActionController/Base/render_to_string
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。