渲染安装

react-rails 包含一个视图助手 (react_component) 和一个不显眼的 JavaScript 驱动程序(react_ujs),它们协同工作将 React 组件放在页面上。你应该在做出反应之后在清单中要求 UJS 驱动程序(如果使用 Turbolinks 则在 turbolinks 之后)。

视图助手在页面上放置一个 div,其中包含所请求的组件类和 props。例如:

<%= react_component('HelloMessage', name: 'John') %>
<!-- becomes: -->
<div data-react-class="HelloMessage" data-react-props="{&quot;name&quot;:&quot;John&quot;}"></div>

在页面加载时,react_ujs 驱动程序将使用 data-react-class 和 data-react-props 扫描页面并安装组件。

如果存在 Turbolinks,则会在页面上安装组件:change event,并在页面上卸载:before-unload。建议使用 Turbolinks> = 2.4.0,因为它会暴露更好的事件。

在 Ajax 调用的情况下,可以通过从 javascript 调用手动触发 UJS 安装:

ReactRailsUJS.mountComponents() 视图助手的签名是:

react_component(component_class_name, props={}, html_options={})

component_class_name 是一个字符串,它命名一个全局可访问的组件类。它可能有点(例如,“MyApp.Header.MenuItem”)。

   `props` is either an object that responds to `#to_json` or an    already-stringified JSON object (eg, made with Jbuilder, see note    below).

html_options 可能包括:tag:使用除 div 之外的元素来嵌入数据反应类和数据反应道具。prerender: true 在服务器上呈现组件。**other 任何其他参数(例如 class:,id :)都会传递给 content_tag。