If - else if 语句 - JavaScript

Question

我是编码新手，我对道具的 if - else if 语句有疑问

下面的代码 sn-p 可以工作，但是我想在 props 中添加另一个属性，如果 'abc' 不可用，那么只有 props 值 'pqr' 应该添加到路径中。

 render() {
    if (this.props.abc?.status !== 'available') return null;
      console.info('Log value= ',this.props);

    const path = this.props.abc.value;
    
    return (
      <View
        getfile={path}   
       console.info('finished loading:', path); 
        }
      />
    );
  }

我想写一些类似的东西

render() {
        if (this.props.abc?.status !== 'available') return null;
        else if (this.props.pqr?.status !== 'available') return null;
          
          console.info('Log value= ',this.props);
          
        if (this.props.abc != null) {
        const path = this.props.abc.value;
        }
        else if (this.props.pqr != null) {
        const path = this.props.pqr.value;
        }
/* I know the above if -else if statement will fail as props value for 'abc' might not be null yet not have the required value in which case it would never go to the else if statement. */
        
        return (
          <View
            getfile={path}   
           console.info('finished loading:', path); 
            }
          />
        );
      }

在这里，我想检查 props 值是否可用于 abc 或 pqr，然后它应该分配该值。如何更好地编码？

任何建议表示赞赏。

Answer 1

你可以把它简化成这样。

• 使用解构从this.props 获取abc 和pqr 属性
• 创建一个变量并将其分配给abc ?? pqr。如果abc 为空，则nested 将等于pqr。
• 如果nested?.status 返回未定义，!== 否定测试将为真。所以，检查nested?.status === 'available'。如果 nested 为 null 或 nested.status 不是“可用”，它将返回 false

const { abc, pqr } = this.props;

const nested = abc ?? pqr;

if (nested?.status === 'available') {
  const { path } = nested;
  return <View... >
}

return null

---

您可以进一步简化它。但是，我觉得它的可读性较差

const { abc, pqr } = this.props;
const { status, path } = abc ?? pqr ?? {};

if (status === 'available')
  return <View... >

return null