Как преобразовать объект в строку, используя FormattedMessage, для визуализации меток в диаграмме d3.js, используя REACTJs? - PullRequest
Новая
       21

Как преобразовать объект в строку, используя FormattedMessage, для визуализации меток в диаграмме d3.js, используя REACTJs?

2 голосов
/ 07 июня 2019

Я пытаюсь создать приложение, которое поддерживает несколько языков для этого Im, используя response-intl, которое переводит данные. При этом я сталкиваюсь с проблемой: когда я пытаюсь перевести, он возвращает меня как [OBJECT OBJECT], но я ожидаю строку.

Я использую "response-intl": "2.7.2" для перевода, «response-c3js»: «^ 0.1.20», для рендеринга c3 JS-диаграммы

Код Barchart. В этом я хочу, чтобы этикетки переводились на другой язык 

     <BarChartWithLine
                          data={this.state.topMerchants}
                          xAxisLable={<InjectIntl/>}
                          yAxisLable="TRANSACTION COUNT"
                          y2AxisLable="SUCCESS RATE"
                          barColor="#6BD0F6"
                          successRateData={
                            this.state.topMerchantsSuccessRate
                          }

В файле injectIntl ​​

  const LocalesMenu = ({ intl }) => {
     const placeholder = intl.formatMessage({id: 'transaction.merchantID'});
return (<div>{placeholder}</div>);     
}

Я получаю вывод как [OBJECT OBJECT]

* +1012 *enter image description here

1 Ответ

1 голос
/ 07 июня 2019

Вы можете использовать функцию как ребенок из документов https://github.com/formatjs/react-intl/blob/master/docs/Components.md#formattedmessage

<FormattedMessage id="transaction.merchantID">
    {(text) => (
        <BarChartWithLine
           data={this.state.topMerchants}
           xAxisLable={text}
           yAxisLable="TRANSACTION COUNT"
           y2AxisLable="SUCCESS RATE"
           barColor="#6BD0F6"
           successRateData={
             this.state.topMerchantsSuccessRate
           }
         />
    )}
</FormattedMessage>

, если вы хотите trans xAxisLable и yAxisLable тоже. Просто заверните, как это. Но код сейчас трудно читать 

<FormattedMessage id="transaction.merchantID">
   {(text) => (
      <FormattedMessage id="transaction.xAxisLable">
         {(text2) => (
            <BarChartWithLine
               data={this.state.topMerchants}
               xAxisLable={text}
               yAxisLable="TRANSACTION COUNT"
               y2AxisLable="SUCCESS RATE"
               barColor="#6BD0F6"
               successRateData={
                 this.state.topMerchantsSuccessRate
               }
            />
          )}
      </FormattedMessage>
   )}
    </FormattedMessage>

Я думаю, что этот код лучше, более читабелен, но немного сложнее. transaction.merchantID - это текст, подобный этому «xAxisLable; yAxisLable; y2AxisLable» 

<FormattedMessage id="transaction.merchantID">
   {(text) => {
      const [xAxisLable, yAxisLable, y2AxisLable] = text.split(';')
      return (
      <BarChartWithLine
         data={this.state.topMerchants}
         xAxisLable={xAxisLable}
         yAxisLable={yAxisLable}
         y2AxisLable={y2AxisLable}
         barColor="#6BD0F6"
         successRateData={
           this.state.topMerchantsSuccessRate
         }
      />
        )
    }}
 </FormattedMessage>
...