Question

我有一个JSON翻译文件，如下所示

"results":{
  "email-notification": "You have n mails"
}

其中“n”将是动态数字。如果有10封邮件，我需要显示“你有10封邮件”。如果有15封邮件，我需要显示“你有15封邮件”。

如何在ReactJS中执行此操作？

我知道，在AngularJS中，我们可以像下面这样做

<span ng-bind-html="results.email-notification|translate:mailCount"></span>

和JSON

"results":{
  "email-notification": "You have {{mailCount}} mails"
}

其中mailCount是邮件数量。

我如何在ReactJS中做同样的事情？

以下给出的是JSX文件

import React, {Component} from 'react';

import jsonData from "../../../public/translation/results.json";

class Results extends Component {

  var mailCount = 10;

  render() {
    return(
        <div className="results">
            <span className="result">{jsonData.results['email-notification']}</span>
        </div>
    );
  }
}

export default Results

假设mailCount为10.我该如何显示它？

Answer 1

看看这个回复 JavaScript equivalent to printf/string.format

我把它改成了方法

function translate(str, ...params) {
  if (str) {
    return str.replace(/{(\d+)}/g, function(match, number) {
      return typeof params[number] != 'undefined'
        ? params[number]
        : match
      ;
    });
  }
}

所以你可以使用像这样的结构

const results = {
  'email-notification': 'You have {0}/{1} mails'
};

然后在JSX内部

<div>
  {translate(results['email-notification'], 'Param1', 'Param2')}
</div>

ReactJs - 如何处理翻译中的变量替换

1 个答案: