如何使用React(JSX)编写一个else结构 - 三元表达不够

Question

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

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>)
}

但这似乎过于复杂.有没有更好的办法？

Answer 1

为什么你说三元不足够表达？

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

Answer 2

如果不需要<div>，则返回<span>元素：

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

您甚至可以将最后一条return语句移出else块。

通常，您不必将所有内容都嵌入JSX。就像您在其他地方一样，事先计算值非常好：

render() {
  let content;
  if (this.props.conditionA) {
    content = <span>Condition A</span>;
  } else if (this.props.conditionB) {
    content = <span>Condition B</span>;
  } else {
    content = <span>Neither</span>;
  }

  return <div>{content}</div>;
}

每当需要/想要使用语句时，都必须这样做。

Answer 3

计算值，绑定到一个变量，然后输出更好。如果你确实想要复杂的内联逻辑，你可以使用&&and ||：

render() {
    return (<div>
        {
          this.props.conditionA && <span>Condition A</span>
          || this.props.conditionB && <span>Condition B</span>
          || <span>Neither</span>
        }
    </div>)
}

编辑：

正如其他人指出的那样，您还可以删除该包装 div 并仍然使用这种方法：

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