ReactJs - как обрабатывать переменные замены в переводах

Question

У меня есть JSON перевода файл, как показано ниже

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

, где «п» будет динамический номер. Если 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>