javascript - reactjs 使用三元运算符渲染 span 标签

Question

我需要在西类牙语的 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，则渲染questions remaining，如果不呈现 left。

英语:

10 questions remaining

西类牙语:

Quedan 10 preguntas

问题是:西类牙语中的数字在句子的中间。如何渲染 span 标签，使数字显示得比文本大？

Answer 1

您可以将您的逻辑拆分为三个独立的分支，并对将要返回的所有内容使用三元组，这样您就可以控制顺序。

示例

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>