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，渲染div，span，如果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>

Answer 2

可以使用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>

使用这种方法，如果需要其他语言或需要更改文本，则无需关注代码。如果翻译可以从服务器生成，e.x一个CMS系统，你不需要在反应代码中写这样的翻译。

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

reactjs render span tag with ternary operator

javascript

reactjs

ternary-operator