JSXの一般的な構文の使用

JSX とは何ですか？#

JSXは js の構文拡張で、js の中で html コードを書くことを可能にし、2013 年に React ライブラリの初回リリースとともに登場し、ユーザーインターフェースの開発プロセスを簡素化し、コードの可読性と保守性を向上させます。

例えば🌰

// JSXを使用しないReactコード
const element = React.createElement('h1', { className: 'title' }, 'Hello, world!');

// JSXを使用したReactコード
const element = <h1 className="title">Hello, world!</h1>;

Tip

JSX は HTML よりも厳格です。タグを閉じる必要があります、例えば <br />。コンポーネントは複数の JSX タグを返すことができません。それらを共有の親要素で包む必要があります、例えば <div>...</div> または空の <>...</> で包むことができます：

function Hello() {
  return (
    <>
      <h1>Hello, world!</h1>
    </>
  );
}

JSX に式を埋め込む#

const name = '張三';
const fn = () => alert('fn関数');

const App = () => {
  return (
    <>
      <h1>{ name }</h1>
      <button>{ fn() }</button>
      <p>{ new Date().toLocaleString() }</p>
    </>
  );
};

JSX に属性を追加する#

Warning

JSX は HTML に比べて JavaScript に近いため、React DOM はキャメルケースの属性命名規則を使用し、HTML 属性名を使用しません。
例えば、classは JSX でclassNameに、tabindexは tabIndex に変わります。

const user = {
  className: 'avatar-img',
  imageUrl: 'https://www.gravatar.com/avatar/0?d=mp',
  style: {
    border: '2px solid red',
    borderRadius: '50%',
  }
}

const App = () => {
  return (
    <>
      <img src={ user.imageUrl } className={ user.className } style={user.style} alt="アバター" />
    </>
  );
};

JSX にイベントをバインドする#

tsx でイベントをバインドするには on[Click]{ fn } 小文字のキャメルケースで、他のイベントも同様です。パラメータを渡す必要がある場合は on[Click]{ () => fn() } を使用できます。

const clickFn = (name) => {
  console.log('クリックされました', name);
}
const mouseEnterFn = () => {
  console.log('マウスが入った');
}
const mouseLeaveFn = () => {
  console.log('マウスが離れた');
}

const App = () => {
  return (
    <>
      <h1>Hello, world!</h1>
      <button onClick={() => clickFn('ボタン')} onMouseEnter={mouseEnterFn} onMouseLeave={mouseLeaveFn}>クリックしてね</button>
    </>
  );
};

JSX で条件レンダリング#

const flag = true;

const App = () => {
  return (
    <>
      <div>{ flag ? <div>本当</div> : <div>偽</div> }</div>
    </>
  );
};

else 分岐が必要ない場合は、より短い論理 && 構文を使用できます：

<div>
  {isLoggedIn && <AdminPanel />}
</div>

より複雑な判断ロジックは関数の中に書くことができます。

const messageTip = (code) => {
  switch (code) {
    case 200:
      return <div className="message-tip success">成功</div>;
    case 404:
      return <div className="message-tip error">エラー</div>;
    default:
      return <div className="message-tip info">情報</div>;

  }
}
const App = () => {
  return (
    <>
      { messageTip(200) }
    </>
  );
};

JSX で要素を反復処理する#

map を使用して html タグを返します。

const userList = [
  { id: 1, name: '張三', age: 18, gender: '男' },
  { id: 2, name: '李四', age: 19, gender: '女' },
  { id: 3, name: '王五', age: 20, gender: '男' },
  { id: 4, name: '趙六', age: 21, gender: '女' },
  { id: 5, name: '錢七', age: 22, gender: '男' },
  { id: 6, name: '孫八', age: 23, gender: '女' },
  { id: 7, name: '周九', age: 24, gender: '男'},
]
const App = () => {
  return (
    <>
      { userList.filter(user => user.age > 20).map(user => <div key={user.id}>{user.name}</div>) }
    </>
  );
};

JSX で html スニペットをレンダリングする#

Warning

dangerouslySetInnerHTMLを使用した後は、要素に内容を追加しないでください、そうしないとエラーが発生します。

const App = () => {
  return (
    <>
      <div dangerouslySetInnerHTML={{__html: el}}>{/* ここは空にしてください、さもないとエラーになります */}</div>
    </>
  );
};

よくある質問#

1、JSX 文内では式のみを使用でき、文やリテラルなどは使用できません

// エラー: オブジェクトはReactの子として無効です（見つかった: {key}を持つオブジェクト）。子のコレクションをレンダリングするつもりなら、配列を使用してください。
const element = <div>{ { key: 'value' } }</div>;

// ✅
const element = <div>{ JSON.stringify({ key: 'value' }) }</div>;

// ✅
const element = <div>{ { key: 'value' }.key }</div>;

2、TSX でジェネリックを使用する方法
通常のジェネリック構文は tsx 構文と衝突し、ジェネリックを要素として理解します。解決策は後ろに , を追加することです。

const clickTap = <T,>(params: T) => alert(params)
const element = <button onClick={() => clickTap('張三')}>クリックしてね</button>;