Reactjs 以这种方式使用速记if/else语句是否错误

我正在学习reactjs，并试图提高代码的质量。在下面的示例中，我有一个纯函数，另一个组件使用它返回用户列表。在我的代码中，我使用速记if/else语句。这是写这样的东西的正确方法，还是有一种更干净的方法可以使可读性和错误最小化。谢谢你的见解

function CandidateList(props) {
  return (
    <Row className="candidate-white-background">
      <Col xs={3} sm={2}>
        {
          props.candidate.profileAvatarURL
          ? <Image className="img-responsive" src={props.candidate.profileAvatarURL} rounded />
          : <Alert bsStyle="danger" className="text-center nothing-in-section-alert-box">
              No Profile Image
            </Alert>
        }
      </Col>
      <Col xs={9} sm={10}>
        { props.candidate.name ? <Link to={`/admin/candidate_profile/${props.candidate.userId}`}> <h3 className="candidate-profile-name">{(props.candidate.name.first + ' ' + props.candidate.name.last)}</h3></Link> : 'No name' }

        { props.candidate.professionalOverview ? <h4>{(props.candidate.professionalOverview.currentCompany + ' ' + props.candidate.professionalOverview.currentTitle)}</h4> : 'Mobile missing' }
        { props.candidate.summary ? <p>{props.candidate.summary.substring(0, 300)}</p> : 'No summary' }
        { props.candidate.contact ? <p><FontAwesome className="fa-fw" name="mobile"/>{props.candidate.contact.mobile}</p> : <p><FontAwesome className="fa-fw" name="mobile" />N/A</p> }
        { props.candidate.address ? <p><FontAwesome className="fa-fw" name="map-marker"/>{props.candidate.address.fullAddress}</p> : <p><FontAwesome className="fa-fw" name="map-marker" />N/A</p> }
      </Col>
    </Row>
  );
}

功能候选列表（道具）{
返回(
{
props.candidate.profilearl
? 
: 
没有配置文件图像
}
{props.candidate.name？{（props.candidate.name.first+''+props.candidate.name.last）}:'没有名字'}
{props.candidate.professionalOverview？{（props.candidate.professionalOverview.currentCompany+'''+props.candidate.professionalOverview.currentTitle）}:'手机丢失'}
{props.candidate.summary？{props.candidate.summary.substring（0300）}
：“无摘要”}
{props.candidate.contact？{props.candidate.contact.mobile}
：N/A
}
{props.candidate.address？{props.candidate.address.fullAddress}
：N/A
}
);
}

速记被称为“三元表达式”，完全可以接受。就“正确的方式”而言，“我们”知道编程时确实没有“正确的方式”。您应该使用使代码更可读、更容易理解的模式。我个人认为三元表达式非常直截了当，使代码易于推理

我个人喜欢这样说

{ this.state.someProp 
 ? <AThing/> 
 : <SomeOtherThing/> 
}

{this.state.someProp
?  
:  
}

---

这样我一眼就能看出是什么。不过，这完全取决于你自己的个人风格。

你是说Ternary吗？我要说的是，在这种情况下，他们应该避免。那些线路已经很吵了。这是一个相当主观的问题。我认为这是你在

jsx

Yes中的唯一选择。我说的是Ternary一家。你提到它很吵。你怎么能让它变得不那么吵闹呢？@bp123的“吵闹”意思是，那一行包含了大量标点符号，因此需要几秒钟才能看到其他符号中的三元运算符符号。如果可能的话，我会把它分成几行，或者把它们抽象成一个函数。当有如此复杂的三元用法时，你可以使用自调用函数。它们使代码更可读、更清晰。