画像の読み込みに失敗したときに代替画像を表示する [JavaScript/React]

React JavaScript

まずは JavaScript で実装してみます。 <img id="image" src="https://" /> <script> const imgEl = document.getElementById("image"); imgEl.onerror = () => { imgEl.onerror = null; imgEl.src = "https://placekitten.com/200/200"; }; </script> 画像の読み込みに失敗したときに onerror が実行されます。…

2020-06-14

cross-envで指定した環境変数がコード上でundefinedになるのをなんとかする

JavaScript React

開発用と本番用で表示する View を切り替えたいときに環境変数を使うことがあります。以下は yarn + webpack + React で環境構築して、環境変数をコードから参照して表示するViewを切り替えている例です。 import React from "react"; function App() { ret…

2020-05-31

異なるDOMノードにレンダリングする2つの React Component 間で状態を共有する

React

結論 Portalを使う ja.reactjs.org 解説既存のサイトを部分的に React に置き換えている場合、それぞれ異なるDOMノードにレンダリングするコンポーネント間で状態を共有したい場面に遭遇することがあります。例えば、次のようなヘッダー、サイドバー、コン…