関数コンポーネントを作る

const ComponentName: React.FC = () => {
  return (
    <>
      なにか
    </>
  );
};

export default ComponentName;

何かデータを渡す

type Props = {
  name: string
}

const ComponentName: React.FC<Props> = (props) => {
  return (
    <>
      なにか
    </>
  );
};

export default ComponentName;

呼び出し元

<ComponentName name="内容" />

タグの中身を渡す

type Props = {
  children?: ReactNode
}

const ComponentName: React.FC<Props> = (props) => {
  return (
    <>
      <div>{props.children}</div>
    </>
  );
};

export default ComponentName;

呼び出し元

<ComponentName>子の中身</ComponentName>

fagai 2021/04/05に更新

Formのイベント

const NameForm: React.FC = () => {
  const [name, setName] = useState("");

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setName(event.target.value);
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    alert("A name was submitted: " + name);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
};

なお、TSX内のonSubmitやonChange属性に直接eventを引数として渡すと自動で型推論されるよう
(例だとonChangeの部分のeventとか)

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={(event) => { setName(event.target.value) }} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );

Eventの渡ってくる型がわからなくなったとき

VSCodeとかだと対象のイベントの属性にカーソルを合わせると出てくる

この例だとReact.FormEventHandler<HTMLFormElement>と書いてあるのでReact.FormEvent<HTMLFormElement>がeventとして渡される

fagai 2021/04/09に更新

if

コンポーネントを出し分けたいみたいな用途がある場合、TSX内に埋め込んじゃうのが良いらしい。

return (
  <div>
    {isLoggedIn
      ? <LogoutButton onClick={this.handleLogoutClick} />
      : <LoginButton onClick={this.handleLoginClick} />
    }
  </div>
);

&&でショートサーキット構文で書くこともよくある

{ count && <h1>Messages: {count}</h1>}

ただの文字列を返したい場合は関数化してもいいみたいだが、あまり例を見ないので直接JSXに書いたほうが良いっぽい

もしも見やすさが明らかに損なわれるようであれば、関数化を考えたほうが良い

fagai 2021/07/15に更新

styled-componentsを使ったときにわからなかったこと

anyなcomponentに対してスタイルを適用するとき、対象のコンポーネントにはpropsとしてclassName?を渡す必要がある。

type Props = {
+  className?: any;
};

これを渡して親のコンポーネントにコンポーネント名として設定する

const Day: React.FC<Props> = (props) => {
  const formatDay = format(props.date, "d");
  return (
    <td className={props.className}>
      {props.isToday ? <b>{formatDay}</b> : formatDay}
    </td>
  );
};

const StyledDay = styled(Day)`
  color: #aaa;
`;

上記のようにしないとスタイルが適用されないので注意