渲染安裝

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。