render_react

反應

一種渲染客戶端和服務器端的React組件的Lo-Fi方法：Ruby：

 class ExampleComponent extends React . Component {
  render ( ) {
    return < marquee > Hello Ruby { this . props . example } </ marquee >
  }
} 

RenderReact.on_client_and_server("ExampleComponent", { example: "!" })
# = >
< div id =" RenderReact-caac405e-1714-495e-aeb4-77b42be42291 " >
  < marquee data-reactroot ="" data-reactid =" 1 " data-react-checksum =" 441921122 " >
    <!-- react-text: 2 --> Hello Ruby <!-- /react-text --> <!-- react-text: 3 --> ! <!-- /react-text -->
  </ marquee >
</ div >
< script >
  RenderReact . ReactDOM . render (
    RenderReact . React . createElement (
      RenderReact . components . ExampleComponent , { "example" : "!" }
    ) ,
    document . getElementById ( 'RenderReact-caac405e-1714-495e-aeb4-77b42be42291' )
  )
</ script >

它帶來了您自己的工具：不包括反應，也不包括任何ES6轉側或模塊捆綁器。它希望您以特定格式準備JavaScript捆綁文件，該文件必須包含React和所有組件。

如果您正在尋找更高級別的替代方案，請查看React_on_rails或React-Rails。

設定

添加到您的Gemfile ：

 gem 'render_react'

JavaScript源準備

反應期望JavaScript捆綁包包括一個稱為RenderReact的全局變量，並具有以下內容：

 {
  React : [ variable which contains React ] ,
  ReactDOM : [ variable which contains ReactDOM ] ,
  ReactDOMServer : [ variable which contains ReactDOMServer ] ,
  components : {
    ComponentIdentifier1 : [ variable which contains the component 1 ] ,
    ComponentIdentifier2 : [ variable which contains the component 2 ] ,
    ...
  }
}

• 反應在哪裡？請參閱https://facebook.github.io/react/docs/react-api.html的第一段
• 反應在哪裡？請參閱https://facebook.github.io/react/docs/react-dom.html的第一段
• ReactDomserver在哪裡？請參閱https://facebook.github.io/react/docs/react-dom-server.html的第一段

您可以擁有兩個不同的JavaScript捆綁文件 - 一個用於服務器渲染，一個用於客戶端渲染。

• 客戶包必須通過您選擇的方法包含在您的應用程序中。您可以跳過ReactDOMServer客戶捆綁包
• 服務器捆綁包必須傳遞以進行RenderReact （請參見使用部分）。您可能會跳過ReactDOM的服務器捆綁包

示例（帶ES6模塊）

 import React from 'react'
import ReactDOM from 'react-dom'
import ReactDOMServer from 'react-dom/server'

import ExampleComponent from './components/example_component'

export default {
  React : React ,
  ReactDOM : ReactDOM ,
  ReactDOMServer : ReactDOMServer ,
  components : {
    ExampleComponent : ExampleComponent
  }
}

被進口為RenderReact

示例（帶有瀏覽器全球）

 window . RenderReact = {
  React : React ,
  ReactDOM : ReactDOM ,
  ReactDOMServer : ReactDOMServer ,
  components : {
    ExampleComponent : ExampleComponent
  }
} 

用法

通過傳遞服務器端JavaScript捆綁包來創建一個反應上下文：

 RenderReact . create_context! File . read ( 'path/to/your/server-bundle.js' ) , mode : :client_and_server

您可以通過不傳遞任何文件源而沒有服務器端捆綁包。

可選mode:關鍵字參數可以具有以下值之一

• :client_and_server （默認） - 組件將呈現服務器端並安裝在客戶端中
• :client - 組件將安裝在客戶端中
• :server - 組件將是靜態渲染的

然後，您可以與

 RenderReact . ( "ExampleComponent" , { example : "prop" } )

可以使用Specfic渲染方法覆蓋上下文渲染模式：

 RenderReact . on_client_and_server ( "ExampleComponent" ) # server- and client-side
RenderReact . on_client ( "ExampleComponent" ) # only client-side
RenderReact . on_server ( "ExampleComponent" ) # only static 

麻省理工學院許可證

版權所有（C）2017 Jan Lelis https://janlelis.com。根據MIT許可發布。

React已獲得BSD許可。