如何使用React（JSX）编写一个else结构 - 三元表达不够 [英] How can I write an else if structure using React (JSX) - the ternary is not expressive enough

问题描述

我想在反应中写出等价物：

I want to write the equivalent in react:

if (this.props.conditionA) {
    <span>Condition A</span>
} else if (this.props.conditionB) {
    <span>Condition B</span>
} else {
    <span>Neither</span>
}

所以也许

render() {
    return (<div>
        {(function(){
            if (this.props.conditionA) {
                return <span>Condition A</span>
            } else if (this.props.conditionB) {
                return <span>Condition B</span>
            } else {
                return <span>Neither</span>
            }
        }).call(this)}
    </div>)
}

但这似乎过于复杂。还有更好的方法吗？

But that seems overly complex. Is there a better way?

推荐答案

为什么你说三元不够表现？

Why do you say that the ternary is not expressive enough?

render() {
  return <span>
    {this.props.conditionA ? "Condition A" 
      : this.props.conditionB ? "Condition B" 
      : "Neither"}
  </span>;
}

这篇关于如何使用React（JSX）编写一个else结构 - 三元表达不够的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！