为什么说三元不够表达？

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

如果您不需要<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>;
}

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

计算值，绑定一个变量，然后输出比较好。如果你确实想要复杂的内联逻辑，你可以使用&&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>
  );
}

如果你的条件和你表达的一样简单，我想你仍然可以像上面提到的@SkinnyJ那样使用三元。它非常优雅，但如果有很多这些条件需要检查，我会担心。还有另一种方法可以解决这个问题：使用 switch 语句。

const props = {
  conditionA: "this is condition a"
};

let value;

switch (Object.keys(props)[0]) {
  case "conditionA":
    value = "Condition A";
    break;
  case "conditionB":
    value = "Condition B";
    break;
  default:
    value = "Neither";
}

console.log(value);

这里有几个假设。该对象不为空并且它只有一个属性。

但如果这些都是真的，对于这样的场景，switch 可能会更高效。这可能对您感兴趣：

Javascript switch vs if else