６時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

2022年4月21日 りあクト！ 第5章 JSXの書き方（p.29~)

TypeScript

JSXの基本文法

tsconfig.jsonのjsxオプション

reactに設定している場合

  • JSXの記述はReact.createElement(...) のように変換されます。
  • createElement メソッドの上位モジュールのReactをインポートする必要があります。

react-jsxにしている場合

  • TypeScript4.1以降のReact17.0から導入された新しいJSX変換方式ではimport React from 'react'を省略できます。

jsxの構文

JSXは最終的にReactElement オブジェクトの生成式になります。 式であるがゆえに変数の代入、狭義のオブジェクトのプロパティ値にするなど、関数の引数や戻り値にするなどが出来ます。

{ }を使用して、JSXの式の中に別の式を埋め込むことも出来ます。

const name = 'Patty';
const greet = (name: string) => <p>Hello, {name || 'Guest'}!</p>;
return <div>{greet(name)}</div>;
  • { }の中でgreet(name)で関数コールをしています。
  • greetの中でも||で条件分岐して要素を返します。

null, undefined, boolean値を{ }の中で使う

null, undefined, boolean値を{ }の中で使うと、何も出力されません。boolean値が{ }内で表示されないという性質を、三項演算子や論理演算子に応用することで、条件に応じたJSXや値を返すことができます。

const n = Math.floor(Math.random() * 10); // 0 〜 9 の整数を生成 
const threshold = 5;
return (
  <div>
    {n > threshold && <p>`n` is larger than {threshold}</p>}
    <p>`n` is {n % 2 === 0 ? 'even' : 'odd'}</p>
  </div>
);
  • return文の最初の{ }内では、ランダムな整数が5より小さい場合はtrueとなり何も返しません。大きい場合は&&の左辺の要素が返されます。
  • 最後のpタグの部分では、ｎが奇数が偶数かを三項演算子で判定して文字列を返しています。

JSXでの繰り返し処理

const list ['Patty', 'Rolley', 'Bobby'];
  if(!list) { return <p>no list</p>}
return (
  <ul>
    { 
      list.map((name) => (
        <li>Hello, {name}!</li>
      ))
    }
  </ul>
);
  • JSXが式を返す値なので.filter(...).map(...) のようにメソッドチェーンや演算子を用いることもできます。

JSXにおけるコメントの書き方

  • JavaScriptと同様に // コメント /* コメント */ の記法で行います。

JSXに複数の要素が含まれるときはトップレベルが一つの要素でなければならない

以下コンパイルエラーになる例

const elems = (
  <div>foo</div>
  <div>bar</div>
  <div>baz</div>
);

解決するには一つのタグで囲います。 フラグメントを用いるのが良いです。

const elems = (
  <>
   <div>foo</div>
   <div>bar</div>
   <div>baz</div>
  </>
);

参考

りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅱ. React基礎編】 p.29~