일부 HTML의 중간에 태그를 조건부로 포함 시키려면 어떻게해야합니까?

Question

Avatar 반응 구성 요소가 있으며 프로필에 링크 할 것인지의 여부를 선택하는 옵션이 있습니다. 예를 들어 사용자 프로필에서 자신의 프로필에 연결하고 대신 사용자 지정 clickHandler을 사용하려는 경우이 프로필을 프로필에 연결하지 않을 수 있습니다. if/else를 기본적으로 동일한 HTML로 if와 else 이외의 다른 방법으로 연결하는 것 외에 다른 좋은 방법이 있습니까?

<div className={"Avatar Avatar--" + this.props.size} onClick={this.props.clickHandler}> 
    {if (this.props.link) { 
     <Link to="profile" params={{userId:this.props.user.id}}> 
    } 
    } 

     <img className="__avatarimage" src={this.props.user.avatar} /> 

    {if (this.props.link) { 
     </Link> 
    } 
    } 
    </div> 

Answer 1

사용 :

<div className={"Avatar Avatar--" + this.props.size} onClick={this.props.clickHandler}> 
{ this.props.link ? 
    <Link to="profile" params={{userId:this.props.user.id}}> 
    <img className="__avatarimage" src={this.props.user.avatar} /> 
    </Link> 
    : <img className="__avatarimage" src={this.props.user.avatar} /> } 

이전을 정의하여 IMG의 이중 정의를 제거하기 위해 시도 할 수 있습니다 :

var img = <img className="__avatarimage" src={this.props.user.avatar} />; 

를하고 사용하여 포함 :

{img} 

Answer 2

나도 링크에 싸여 이미지 나 이미지를 반환하는 함수를 만든 다음 DIV에 추가 것 : 아래는 그냥 내가 무엇을 의미하는지의 예를 보여 일부 의사 렌더링 코드입니다.

var createAvatar = function() { 
    if (this.props.link) { 
    return <Link to="profile" params={{userId:this.props.user.id}}> 
     <img className="__avatarimage" src={this.props.user.avatar} /> 
    </Link>; 
    } else { 
    return <img className="__avatarimage" src={this.props.user.avatar} />; 
    } 
}; 

var avatar = createAvatar(); 
return <div className={"Avatar Avatar--" + this.props.size} onClick={this.props.clickHandler}> 
    {avatar} 
</div>;