在 Rails 中，如何以 HTML 的形式访问服务器端呈现的 React 组件

Question

语境

我正在尝试将 React 组件转换为 PNG，以便可以将其附加到 Rails 邮件程序中的 email。 该组件是一个饼图Rechart 。

我想在 Rails 中完成这一切，而不是使用 Node.js 服务器解决方案，它使用repng之类的东西将组件转换为 PNG。

Rechart 将图表组件加载为 SVG，因此我可以访问 SVG 并使用Mini-Magic 之类的东西将其转换为 PNG。

问题

如何在服务器端将 React 组件加载为 HTML 以访问 SVG 进行转换。

要在 Rails 中加载服务器端组件，我们可以执行react-rails 建议的操作：

在视图中

<%= react_component('HelloMessage', {name: 'John'}, {prerender: true}) %>

或在 controller

class TodoController < ApplicationController
  def index
    @todos = Todo.all
    render component: 'TodoList', props: { todos: @todos }, tag: 'span', class: 'todo'
  end
end

我想做一些类似这篇文章在使用ReactDOMServer 时所建议的事情。

// Renders our Hello component into an HTML string
const html = ReactDOMServer.renderToString(<Hello />);

我需要在 Rails 邮件程序中的 Ruby 中执行等效操作。 如何以 HTML 的形式访问服务器端渲染组件？

编辑：

sig 的答案是正确的，因为它允许您访问 controller 实例的 HTML，这对我有用：

controller_instance = ComponentsController.new()
html_string = controller_instance.render_to_string(:action => "index", :layout => false)

但是， html_string output 是：

"<div data-react-class=\"personnel/TrainingStatusChart\" data-react-props=\"{&quot;metaData&quot;:{&quot;currentPage&quot;:1,&quot;scopedCount&quot;:23,&quot;statusGreyCount&quot;:15,&quot;statusHighCount&quot;:5,&quot;statusLowCount&quot;:2,&quot;statusMediumCount&quot;:1,&quot;totalCount&quot;:23,&quot;totalPages&quot;:1,&quot;unscopedCount&quot;:23},&quot;prerender&quot;:true}\"></div>\n"

它是包含所有道具的 React 组件。 预渲染 React 组件不会将其编译为服务器端的 HTML。 因此，无法在 React 组件中访问 SVG 以转换为 PNG。 这篇文章是这样说的：

此预渲染过程无权访问 window 或文档，因此它不会加载运行时 JavaScript 或 CSS。

我仍然坚信这一定是可能的。 也许以某种方式使用 Capybara 和 Headless Chrome 来渲染 React 组件。 但是，我还没有找到一个示例实现。

Answer 1

您可以尝试使用 controller 的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