React-Rails：使用带有翻译 I18n 的组件

Question

我已将react-rails gem 添加到我的项目中，我想将其用于已翻译的组件。

我无法放入预编译的资产 erb 模板，但我仍在尝试创建组件，使它们在所有项目中可用，然后通过一些翻译部分使用它们。

工作场景

# app/view/example/_react_component.coffee.erb
DOM = React.DOM

FormInput = React.createClass
  displayName: "FormInput"
  render: ->
    DOM.div
      className: 'row control-group'
      DOM.div
        className: 'form-group col-xs-12 floating-label-form-group controls'
        DOM.label
          htmlFor: @props.id
          @props.label
        DOM.input
          id: @props.id
          className: 'form-control'
          placeholder: @props.placeholder
          type: @props.type
        DOM.p
          className: 'help-block text-danger'

formInput = React.createFactory(FormInput)

window.ValidationFormInput = React.createClass
  displayName: "ValidationFormInput"

  getInitialState: ->
    { }

  render: ->
    formInput
      id: "<%= t('validation_form.id') %>"
      label: "<%= t('validation_form.label') %>"
      placeholder: "<%= t('validation_form.placeholder') %>"
      type: 'text'

validationFormInput = React.createFactory(ValidationFormInput)

# app/view/example/index.html.erb
<%= react_component('ValidationFormInput', {}, {class: "container"}) %>

所需的场景（不工作）

# app/assets/javascripts/components/form_input.coffee
DOM = React.DOM

FormInput = React.createClass
  displayName: "FormInput"
  render: ->
    DOM.div
      className: 'row control-group'
      DOM.div
        className: 'form-group col-xs-12 floating-label-form-group controls'
        DOM.label
          htmlFor: @props.id
          @props.label
        DOM.input
          id: @props.id
          className: 'form-control'
          placeholder: @props.placeholder
          type: @props.type
        DOM.p
          className: 'help-block text-danger'

formInput = React.createFactory(FormInput)

# app/view/example/_react_component.coffee.erb
window.ValidationFormInput = React.createClass
  displayName: "ValidationFormInput"

  getInitialState: ->
    { }

  render: ->
    formInput
      id: "<%= t('validation_form.id') %>"
      label: "<%= t('validation_form.label') %>"
      placeholder: "<%= t('validation_form.placeholder') %>"
      type: 'text'

validationFormInput = React.createFactory(ValidationFormInput)

# app/view/example/index.html.erb
<%= react_component('ValidationFormInput', {}, {class: "container"}) %>

我猜这个问题与我的组件定义的范围有关，但我不知道如何使组件可用于任何部分。

提前谢谢你

编辑

为了提供翻译，我找到了gem I18n-js。安装后，我可以轻松运行 rake 任务来创建我的config/locales/* 翻译的 js 版本

Answer 1

很好的问题。

有几种方法可以做到这一点。

1- 通常，这不仅仅是一个关于如何将数据从 Rails 传递到 React 的问题，而是如何将数据传递到 Javascript。您可以将数据存储在标头中的 meta 中，并从 Javascript 访问它。这样，您仍然可以快速压缩 JS。 （而不是 js.erb 等）

2- 将所有翻译传递给反应组件。基本上，您可以将参数传递给反应组件，其中之一是翻译。如果是几个翻译，那很好，但如果您的列表增加，您的页面上的负载会很重。

3- 制作您自己的 Javascript 翻译器。这是我创建的 CoffeeScript 示例；确保在其他文件之前将其添加到您的资产列表中。 在我的代码中，我从meta 中提取语言环境（如您在代码中所见）。随意编辑。

class Translator
  @en = {
    internet_connection_lost: "Your internet connection has been lost"
    attempting_to_reconnect: "Attempting to reconnect!"
    failed_to_reconnect: "Failed to reconnect..."
    connection_success: "Connected"
    reconnecting: "Reconnecting..."
    bid_received: "Bid received. New balance $$bid_balance$$"
  }

  @ar = {
    internet_connection_lost: "لقد فقدت الاتصال بالإنترنت"
    attempting_to_reconnect: "نحاول إعادة الاتصال!"
    failed_to_reconnect: "لم تنجح إعادة الاتصال بالشبكة..."
    connection_success: "متصل بشبكة الإنترنت"
    reconnecting: "إعادة الاتصال جارية..."
    bid_received: "تم تلقي العرض. رصيد جديد $$bid_balance$$"
  }

  @get_translations: (locale) ->
    switch (locale)
      when 'en'
        @en
      when 'ar'
        @ar

  @translate: (val, interpolation) ->
    # get locale from meta
    locale = $("meta[name='locale']").attr("content") || "en"
    translation = Translator.get_translations(locale)[val]

    if interpolation
      console.log "#{JSON.stringify(interpolation)}"

    for k,v of interpolation
      console.log "#{translation} : #{k} : #{v}"
      translation = translation.replace(k, v)

    return translation

window.Translator = Translator

这就是你如何使用翻译器

  message = Translator.translate(
    "bid_received", { "$$bid_balance$$": 10 }
  )