Reactjs отображает тег span с тернарным оператором
Мне нужно отобразить число с большим шрифтом в теге span на испанском языке.
У меня есть такой код React.js с тернарным оператором:
<div>
{togo !== 0
? (<div className = "text-center"><span className = "display-4">{togo}</span>{togo > 1 ? ` questions remaining` : ` left!`}</div>)
: ("")
}
</div>
На словах: если есть togo, рендерить div с span, если togo> 1, рендерить questions remaining, если не рендерить left.
Английский:
10questions remaining
Испанский:
Quedan
10preguntas
Проблема в том, что число на испанском языке находится в середине предложения. Как я могу отобразить тег span, чтобы число отображалось больше текста?
Попробуйте решить это с помощью css. Вы можете либо добавить дополнительный класс, который вы можете стилизовать, либо стилизовать тот же класс, если он больше ни для чего не использовался. Например, вы можете попробовать font-size: 150%, чтобы сделать его больше, чем окружающий текст на 150%.
@Shilly: вопрос в том, как добавить испанскую версию с разницей в грамматической структуре. С английским языком я легко могу добавить текст после числа. @ Asyene Milazi: Я не совсем уверен, как мне добавить класс / тег в логику, отсюда и вопрос.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете разделить свою логику на три отдельные ветви и использовать троичную систему для всего, что будет возвращено, чтобы вы могли контролировать порядок.
Пример
function App(props) {
const { lang, togo } = props;
if (togo === 0) {
return null;
} else if (togo === 1) {
return (
<div>
<span className = "display-4">{togo}</span> left!
</div>
);
} else {
return lang === "es" ? (
<div>
Quedan <span className = "display-4">{togo}</span> preguntas
</div>
) : (
<div>
<span className = "display-4">{togo}</span> questions remaining
</div>
);
}
}
ReactDOM.render(<App lang = "es" togo = {2} />, document.getElementById("root"));<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "root"></div>Спасибо. Ваше решение кажется хорошей идеей. Я попробую.
Я поддержал твой ответ. Реализую ваше предложение и отмечу правильный ответ.
Вы можете использовать формат печати строки, как в Эквивалент JavaScript printf / string.format :
var translations = {
"en": {
"questions_remaining": "<span className=\"display-4\">{0}</span> questions remaining",
"left": "<span className=\"display-4\">{0}</span> left"
},
"es": {
"questions_remaining": "Quedan <span className=\"display-4\">{0}</span> preguntas",
"left": "<span className=\"display-4\">{0}</span> left"
}
},
togo = 10;
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined'
? args[number]
: match
;
});
};
}
ReactDOM.render(<div>
{togo !== 0
? <div className = "text-center" dangerouslySetInnerHTML = {{__html: togo > 1 ? translations["en"]["questions_remaining"].format(togo): translations["en"]["left"].format(togo)}}></div>
: ""
}
</div>, document.getElementById("english"));
ReactDOM.render(<div>
{togo !== 0
? <div className = "text-center" dangerouslySetInnerHTML = {{__html: togo > 1 ? translations["es"]["questions_remaining"].format(togo): translations["es"]["left"].format(togo)}}></div>
: ""
}
</div>, document.getElementById("spanish"));<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "english"></div>
<div id = "spanish"></div>При таком методе вам не нужно обращать внимание на код, если требуются другие языки или нужно изменить текст. Если перевод может быть сгенерирован с сервера, например, системы CMS, вам не нужно писать такие переводы в кодах реакции.
Число {togo} находится в отдельном диапазоне, так что, может быть, отредактировать класс css display-4? Не знаю, как работает css в React. Но я сбит с толку. Возникает вопрос: как увеличить размер номера? Или вопрос: как добавить испанскую версию?