Как условно включить тег в середине некоторого HTML в React

Question

У меня есть компонент Avatar React, и есть возможность сделать ссылку на профиль или нет. Возможно, вы не захотите, чтобы он ссылался на профиль, если, скажем, ваш профиль пользователя, и вместо этого вы хотите сделать пользовательский clickHandler. Есть ли лучший способ, кроме как просто делать if/else с в основном идентичным HTML в каждом, если и не только ссылку? Ниже приведены некоторые псевдо-код рендеринга, чтобы показать пример того, что я имею в виду:

<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>;