如何使用FormattedMessage将对象转换为字符串以使用REACTJs在d3.js图表​​中呈现标签？

Question

我正在尝试使用可翻译数据的react-intl创建一个支持此Im的多语言的应用程序。在执行此操作时，我遇到了一个问题，当我尝试翻译它时，我返回为[OBJECT OBJECT]，但我希望输入一个字符串。

我正在使用“ react-intl”：“ 2.7.2”进行翻译， “ react-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]

Answer 1

您可以将function作为文档中的子元素使用 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>

如果您也想反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>