Skip to main content

TypeScript や React の文法的なことメモ

return は 1行ならクォート、複数行ならカッコ​

1行の場合

tsx
return '<div>aaa</aaa>';

複数行の場合

tsx
return (
    <div>
        aaa
    </div>
);

return で返せるのは 1要素​

これは OK

tsx
return '<div>aaa</div>';

これは NG

tsx
return (
  <div>aaa</div>
  <div>bbb</div>
);

親が1要素なら良いので、入れ子にしてればOK

tsx
return (
  <div>
    <div>aaa</div>
    <div>bbb</div>
  </div>
);

オブジェクトの分割代入​

ts
const { pathname } = useLocation()

というのは、以下のように書くのと同じこと。

ts
const x = useLocation();
const pathname = x.pathname;

繰り返し要素を出力したい​

{...} で要素の配列を渡してあげると良い。map で変換する

tsx
const values = ['aa', 'bb', 'cc'];

return (
  <ul>
    {values.map((value) => (
      <li>{value}</li>
    ))}
  </ul>
);

インデックスつきにしたい場合はこう

tsx
{values.map((value, index) => (
  <li>{index+1}: {value}</li>
))}

表示例​

  • key1: val1
    • aa
    • bb
    • cc
    • 1: aa
    • 2: bb
    • 3: cc

コード​

tsx
import React from 'react';

const samplleObject = {
  'key1': 'val1',
  'key2': 'val2',
  'key3': 'val3',
};

const SampleTagForTSLang: React.FC = () => {
  const values = ['aa', 'bb', 'cc'];
  const { key1 } = samplleObject;

  return (
    <ul>
      <li>
        key1: {key1}
      </li>
      <li>
        <ul>
          {values.map((value) => (
            <li>{value}</li>
          ))}
        </ul>
      </li>
      <li>
        <ul>
          {values.map((value, index) => (
            <li>{index+1}: {value}</li>
          ))}
        </ul>
      </li>
    </ul>
  );
};

export default SampleTagForTSLang;
Last updated on