你如何使用 React 创建一个三部分的条件渲染？答案

【问题标题】：How do you create a three part conditional render using react?你如何使用 React 创建一个三部分的条件渲染？
【发布时间】：2020-10-07 19:19:51
【问题描述】：

我正在尝试创建条件渲染，但似乎以某种方式搞砸了。这可能吗？

location: `${props.off_campus_location ? ( `${props.off_campus_location}` ) : ( `${props.campus_location.name}` ) : ( `${props.location_type}` )}`,

我得到的错误：

意外的令牌，应为“}” (15:118)

【问题讨论】：

“渲染”是什么意思？看起来您正在尝试创建一个动态表达式，这需要臭名昭著的不安全 eval()。

标签： javascript reactjs next.js

【解决方案1】：

不管有什么价值，我通常只是将它们移到辅助方法中

class SomeComponent extends React.Component {
   render() {
     const someProp = this.state.someProps

     const someComplexStatement = () => {
       if(someProp === 1) {
         return (<span>1</span>)
       } else if (someProp === 2) {
         return (<span>2</span>)
       }
     }
     return (
       <div>
         { someComplexStatement() }
       </div>
     )
   }
}

您可以将其移至类方法、其他组件，只要有意义。就我的口味而言，三元运算符有点难以阅读，因此我尝试对其进行一些清理。这里没有“正确”的答案，但如果我要的不仅仅是简单的if/else，我会尽量避免使用它们。

【讨论】：

【解决方案2】：

您正在尝试使用语法无效的三元运算符。 MDN docs 对如何使用这个结构有很好的解释。

您可以使用一系列|| 运算符来呈现序列中的第一个真值，如下所示：

location: `${props.off_campus_location ? ( `${props.off_campus_location}` ) : ( `${props.campus_location.name}` || `${props.location_type}` )}`

虽然我认为如果您只使用 if 语句，您想要完成的工作会更简洁，但当然，这是个人喜好。

【讨论】：