DRYな備忘録

Don't Repeat Yourself.

【React】画像がNotFoundのときimgタグごと表示せず存在を消す

目的

画像がサーバ上に無いとき、こうなる。

f:id:otiai10:20180308102437p:plain

画像がサーバ上に無いときは「見つからないよ!」という画像を出すのもかっこ悪いので、タグごと存在を消したい。こう。

f:id:otiai10:20180308102621p:plain

参考

コード

class Favicon extends Component {
  render() {
    return (
      <div ref={ref => this.root = ref}>
        <img
          src={this.props.url}
          onError={() => this.root.style.display = 'none'}
        />
      </div>
    );
  }
}

やってること

  1. 消したいものをrefとして取得しておく
    • デザインの都合上、imgのひとつ上のdivを採っているが、imgそのものでもよい
  2. imgタグのonerrorプロパティを使って、上記refを消す
    • 試してないけど、.remove()でもいけるかな

そのコミット

github.com

雑感

DRYな備忘録として

作りながら学ぶ React入門

作りながら学ぶ React入門

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門