我需要在西类牙语的 span
标记中呈现一个更大字体的数字。
我有一个像这样的带有三元运算符的 React.js 代码:
<div>
{togo !== 0
? (<div className="text-center"><span className="display-4">{togo}</span>{togo > 1 ? ` questions remaining` : ` left!`}</div>)
: ("")
}
</div>
换句话来说:如果有togo
,则用span
渲染div,如果togo
> 1,则渲染剩余问题
,如果不渲染left
。
英语:
10
questions remaining
西类牙语:
Quedan
10
preguntas
问题是:西类牙语中的数字位于句子的中间。如何渲染 span
标签,使数字显示得比文本大?
最佳答案
您可以将逻辑分为三个独立的分支,并将三元值用于将返回的所有内容,以便您可以控制顺序。
示例
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 - ReactJS使用三元运算符渲染span标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51541737/