ruby-on-rails-4 - React-Rails:使用具有翻译 I18n 的组件

Question

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

我无法放入预编译 Assets 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 的问题。您可以将数据存储在 header 中的 meta 中，并从 Javascript 访问它。这样你仍然可以快速压缩你的 JS。 (而不是 js.erb 等)

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

3- 制作您自己的 Javascript 翻译器。这是我创建的 CoffeeScript 示例；确保在其他文件之前将其添加到您的 Assets 列表中。在我的代码中，我从 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 }
  )