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。 / p>

英语：

还有
10个问题

西班牙语：

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 equivalent to 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系统）生成，则无需在React代码中编写此类翻译。

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

2 个答案: