在三元运算符中使用OR

Question

我有一个简单的三元运算符，我想用两个不同的字符串返回null。

this.props.sportType === 'tennis' || 'soccer' ? null : <li onClick={this.props.onClick} className={styles.menuItem}>N/A</li>

但是，不幸的是，这并不完全有效。我如何使用||正确地使用三元运算符？

谢谢！ ：）

Answer 1

使用一个数组，查看其中是否包含sportType：

['tennis', 'soccer'].includes(this.props.sportType)
? null
: <li onClick={this.props.onClick} className={styles.menuItem}>Sport</li>

（也最好缩进较长的表达式）

Answer 2

使用第二个值重复比较

this.props.sportType === 'tennis' || this.props.sportType === 'soccer'
    ? ...

Answer 3

就像在IF语句中一样，您需要将“足球”字符串与

进行比较

this.props.sportType === 'tennis' || this.props.sportType === 'soccer' ? null : <li onClick={this.props.onClick} className={styles.menuItem}>N/A</li>

Answer 4

您可以使用正则表达式

/^tennis|soccer$/.test(this.props.sportType) ? null : <li onClick={this.props.onClick} className={styles.menuItem}>N/A</li>