3

プロジェクトの gem に追加しましたが、react-rails翻訳されたコンポーネントに使用したいと考えています。

プリコンパイル済みのアセット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 バージョンを作成できます

4

1 に答える 1

3

素晴らしい質問です。

これを行うにはいくつかの方法があります。

1- 通常、これは単に Rails から React にデータを渡す方法に関する質問ではなく、一般的に Javascript にデータを渡す方法に関する質問です。データをヘッダーに格納し、metaJavascript からアクセスできます。このようにして、JS を圧縮して高速にすることができます。(js.erbなどの代わりに)

2-すべての翻訳を反応コンポーネントに渡します。基本的に、react コンポーネントに引数を渡すことができます。そのうちの 1 つは翻訳です。翻訳数が少ない場合は問題ありませんが、リストが大きくなると、ページの負荷が高くなります。

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 }
  )
于 2016-06-09T12:46:05.883 に答える