すべてのカテゴリ

React のリストの表示を条件によって変えるには？Vue の公式チュートリアル（英語版）のステップ８では、「Computed Property」で事前処理したデータを表示する課題があります。React ではどのようにするのかをこの記事で紹介しています。React の基本は Typescript!この連載では何回も触れていますが、React の表示の基本は全てプログラムです。つまり、Typescript (Javascript)で処理することになります。 したがって、Vue の「Computed property」のような概念はありません。 基本は、＊　表示の更新は、「ステート」を利用して管理する＊　データの処理は基本的に関数（method）を使う　この例では、前回に引き続き、「Todo(やる事)」の一覧の表示を、完了したものを表示するかしないかを切り替えるわけですが、元々のやる事リスト（todos）をステートで管理して、実際の表示は、条件によって選別したデータのみを表示するような形で実現します。したがって、「_filteredTodos()_」という関数で条件によって表示するデータを抜き出して、この関数が返すデータを表示するようにします。 ただし、「条件」が変わった場合にも、表示内容を更新する必要があるので、「条件」もステートで管理します。この場合の条件は、「_hideCompleted_」です。条件によって、表示データを選別する関数は以下のようになります。function filteredTodos(): Array<Todo> {  return todos.