Javascript 带三元运算符的reactjs呈现范围标记

我需要在西班牙语的

span

标记中呈现字体较大的数字

我有这样一个React.js代码，带有三元运算符：

<div>
{togo !== 0
  ? (<div className="text-center"><span className="display-4">{togo}</span>{togo > 1 ? ` questions remaining` : ` left!`}</div>)
  : ("")
}
</div>

{多哥！==0
（{togo}{togo>1？`剩下的问题'：`左！`}）
: ("")
}

换句话说：如果有

togo

，则使用

span

呈现div，如果

togo

>1，则呈现

剩余问题

，如果没有呈现

左侧

中文：

10

剩余问题

西班牙文：

克丹

10

preguntas

---

问题是：西班牙语中的数字在句子的中间。如何呈现

span

标记，使数字显示得比文本大？

您可以将逻辑分成三个独立的分支，并对将返回的所有内容使用三元，以便控制顺序

示例

功能应用程序（道具）{
康斯特{朗，多哥}=道具；
如果（多哥===0）{
返回null；
}否则如果（多哥===1）{
返回(
{多哥}左！
);
}否则{
返回lang==“es”(
克丹{多哥}普雷蒙塔斯
) : (
{多哥}剩下的问题
);
}
}
render（，document.getElementById（“根”））
您可以使用字符串的格式打印，如下所示：


var转换={
“en”：{
“剩余问题”：“{0}剩余问题”，
“左”：“{0}左”
},
“es”：{
“剩余问题”：“奎丹{0}普雷蒙塔斯”，
“左”：“{0}左”
}
},
多哥=10；
if（！String.prototype.format）{
String.prototype.format=函数（）{
var args=参数；
返回此。替换（/{（\d+）}/g，函数（匹配，编号）{
返回参数的类型[编号]！=“未定义”
？args[编号]
：匹配
;
});
};
}
ReactDOM.render(
{多哥！==0
？1？翻译[“en”][“剩余问题”]。格式（多哥）：翻译[“en”][“左”]。格式（多哥）}>
: ""
}
，document.getElementById（“英文”）；
ReactDOM.render(
{多哥！==0
？1？翻译[“es”][“剩余问题”]。格式（多哥）：翻译[“es”][“左”]。格式（多哥）}>
: ""
}
，document.getElementById（“西班牙语”）

数字{togo}在它自己的范围内，所以是否可以编辑display-4 css类？不知道css在react中是如何工作的。但我很困惑。问题是：如何使数字样式更大？或者问题是：如何添加西班牙语版本？尝试使用css解决它。您可以添加一个可以设置样式的额外类，或者如果该类不用于其他用途，则可以设置该类的样式。例如，您可以尝试使用字体大小：150%，使其比周围的文本大150%。@Shilly:问题是：如何添加西班牙语版本以及语法结构的差异。使用英语，我可以很容易地在数字后添加文本。@Asyene Milazi：我不太确定如何将类/标记注入到逻辑中，因此提出了这个问题。谢谢。你的解决方案似乎是个好主意。我试试看。我没有投你的票。我将实施你的建议，并标出正确答案。