3

我有一个AvatarReact 组件,并且可以选择是否将其链接到个人资料。例如,如果您在用户个人资料上,您可能不希望它链接到个人资料,而是您想做一个自定义的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>
4

2 回答 2

3

利用:

<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}
于 2014-11-20T09:45:31.060 回答
1

我将创建一个函数,该函数返回图像或包含在链接中的图像,然后将其添加到 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>;
于 2014-11-20T06:02:59.723 回答