3

React コンポーネントが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>
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 を以前に定義することで、 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 に答える