デストラクチャリング | 配列やオブジェクトからデータを展開する

デストラクチャリングは、配列やオブジェクトからデータを展開し、それを新しい変数に割り当てる便利な方法を提供します。 
const { data: resData } =  AnimalService.list(params)>
AnimalService.list(params) のレスポンスから data プロパティを取り出します。
その data プロパティの値を新しい変数 resData に割り当てます。
つまり、以下とと同じ意味です。


	const response = AnimalService.list(params);
	const resData = response.data;

複数の引数に展開するタイプ


	const object = { data: 'value', anotherProp: 123 };
	const { data, anotherProp } = object;
	
	console.log(data); // 'value'
	console.log(anotherProp); // 123

React Router の Link コンポーネント

React そのものに "Link" コンポーネントは標準では含まれていません。 Web アプリケーションでナビゲーションを実現するために広く使用されているライブラリ「React Router」には Link コンポーネントがあります。 この Link コンポーネントは、ユーザーがアプリケーション内の異なるパスにナビゲートする際に使用されます。 React Router の Link コンポーネントは、ブラウザのデフォルトのページ再読み込みを引き起こす代わりに、SPA（シングルページアプリケーション）に適しています。 通常、この Link コンポーネントは <a> タグを内部的にレンダリングしますが、ページをリロードするのではなく、指定された to プロパティの URL にアプリケーションのビューを切り替えます。 Link コンポーネントの基本的な使用方法は以下の通りです： jsx 

import { Link } from 'react-router-dom';

function App() {
  return (
    <div>
      <Link to="/about">About Us</Link>
      <Link to="/contact">Contact</Link>
    </div>
  );
}
ここでの to プロパティは、リンク先のパスを指定します。<Link to="/about"> は /about パスへのリンクを作成し、ユーザーがこのリンクをクリックすると About Us コンポーネントが表示されます（もちろん、/about パスに対して適切なルート設定がされている必要があります）。 React RouterのLinkコンポーネントはいくつかのプロパティ（属性）を持っており、それらはリンクの振る舞いをカスタマイズするために使われます。 以下はLinkコンポーネントの主要なプロパティです： to: ナビゲートするパスまたはロケーションオブジェクトを指定します。文字列でパスを直接指定するか、パス名、検索クエリ、ステートを持つオブジェクトを渡すことができます。 

<Link to="/about">About</Link>
// または
<Link to={{ pathname: "/about", search: "?sort=name", state: { fromDashboard: true } }}>
  About
</Link>
replace: trueの場合、ナビゲートするときに履歴スタックの現在のエントリを新しいエントリで置き換えます。デフォルトはfalseで、新しいエントリが履歴スタックに追加されます。 

<Link to="/about" replace>About</Link>
state: ナビゲーション時に履歴エントリに保存されるステートオブジェクトを指定します。これは、目的のルートに追加の状態を渡すのに便利です。 

<Link to={{
  pathname: '/about',
  state: { fromDashboard: true }
}}>About</Link>
onClick: リンクがクリックされたときに実行される関数を指定します。デフォルトのナビゲーションを防ぐためにevent.preventDefault()を呼び出すことができます。 

<Link to="/about" onClick={(event) => {
  // カスタムの振る舞いやチェック
  event.preventDefault();
}}>About</Link>
innerRef: リンクの実際の<a>タグに対するrefを取得するために使います（React v16.3以降はforwardRefを使用します）。 

<Link to="/about" innerRef={node => {
  // `<a>`タグの参照を使う
}}>About</Link>
aria-current: ナビゲーションの現在のページを示すためのARIA属性です。リンクが現在アクティブなルートを指している場合に、スクリーンリーダーなどのアシスティブテクノロジーに追加情報を提供します。

TypeScriptの独特な連想配列ループとマップデータの作成


    let newCategoryMap: { [key: string]: string } = {};
    
    richMenuCategories.forEach((ent: any) => {
      newCategoryMap[ent.id] = ent.name;
    });
    console.log(newCategoryMap);//■■■□□□■■■□□□

  1. ホーム
  2. プログラミングの覚書
  3. React + TypeScriptの覚書