TSX(JSX)覚書

八木貴之

初スクラップ。説明読んでなんとなく想定されている用途はわかったけど、個人的に活用するとしてもすごくいい機能だと思う。とりあえず試す。

八木貴之

<br>は<br/>じゃないとエラー。

八木貴之

親要素が複数あるとエラー。

.tsx

const no_error = ()=> {
  return (
    <div></div>
  );
}
const get_an_error = ()=> {
  return (
    <div></div>
    <div></div>
  );
}
// JSX expressions must have one parent element.

複数行にするときはReact.Fragmentで囲う。

.tsx

const no_error = ()=> {
  return (
    <React.Fragment>
      <div></div>
      <div></div>
    </React.Fragment>
  );

八木貴之

<li></li>をmap()で繰り返す。

.tsx

const tags = ['a','b','c'];
const iterate_tag = ()=> {
  return (
    <ul>{tags.map((tag)=> { return <li>{tag}</li>; })}</ul>
  );
}

複数行にもできる。

.tsx

const iterate_tag = ()=> {
  return (
    <ul>
      {tags.map((tag)=> {
        return <li>
          {tag}
        </li>;
      })}
    </ul>
  );
}

八木貴之

改行したいときは\nと書いてCSSで折り返す。

.tsx

function new_line() {
  return (
    <p>改行\nしたい</p>
  );
}

.scss

p { white-space: pre-wrap; }

八木貴之

こんな感じのソースがあった場合、key={tag.id}とあるようにkeyを設定しないとWarnが出た。

index.tsx

import {Tags} from "path/to/dir/tags";

const tags = [
  { id: 1, name: 'hoge' },
  { id: 2, name: 'fuga' },
  { id: 3, name: 'piyo' },
]

export const Page = () => {
  return(
    <Tags tags={tags}/>
  )
}

tags.tsx

export const Tags = ({tags})=> {
  return (
    <ul>
      {tags.map((tag)=> {
        return <li key={tag.id}>
          <span>{tag.name}</span>
        </li>;
      })}
    </ul>
  )
}

＊key={tag.id}の記述がない場合。

Warning: Each child in a list should have a unique "key" prop.

keyにid等ではなくindexを用いるのはやめた方がいいらしい。
こちらの記事が完全一致だったので助かりました。

八木貴之

if文。変数hogeが文字列fugaだったら<Page/>を出力。

.tsx

{hoge === "fuga" && <Page/>}

こちらを参考にさせていただきました。

八木貴之

propsの型。

.tsx

type Props = {

  // 文字列
  str: string;

  // 数値
  num: number;

  // 真偽値
  bool: boolean;

  // オブジェクト
  obj: {
    str: string;
  };

  // 配列
  strArr: string[];

  // 連想配列
  objArr: {
    str: string;
  }[];

  // 関数
  func: () => void;

  // children（React.FCでは自動で定義されるので記述は不要）
  children?: React.ReactNode;

  // childrenを受け付けない
  children?: never;

  // 文字列のみのchildren
  children?: string;

  // 単一要素のみのchildren
  children?: React.ReactChild;

  // 単一のReactElementのみのchildren
  children?: React.ReactElement;

  // css プロパティ
  style?: React.CSSProperties;

  // clickイベントオブジェクトを引数で受け取る
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;

  // onClickと同じ、handlerの型も用意されている
  onClick2?: React.MouseEventHandler<HTMLButtonElement>;

  // マウスイベントだけでなくドラッグやクリップボードなど、
  // イベント関連は一通り型定義が用意されている
}

八木貴之

React.FCはFunctionComponentの型。

childrenを定義なしで使用できる（引数は必要）
PropsをFCの直後に<指定したProps名>で指定
Props内のプロパティを引数として{}に入れて設置

Main.tsx

import React from 'react';
type Props = {
  text?: string; // tsxで「?」付けるとオプションになる
}
const Main: React.FC<Props> = ({children, text}) => {
  return(
    <div>
      {text}
      {children}
    </div>
  );
} 
export default Main;

こんな感じで囲うだけ。

App.tsx

import React from 'react';
import Main from 'Main';
const App: React.FC = () => {
  return (
    <Main>
      {/* content */}
    </Main>
  );
}