【React】JSXの中に別の関数のJSXを読み込む（入れ子状態）

Reactの続きです。前回はJSXを事始めて、変数でテキストやCSSスタイルを読み込んでみました。今回はJSXの中に別の関数のJSXを読み込むのをやってみます。JSXの入れ子状態です。それではいきましょう！

【目次】

前回記事
※参考：【React】JSX事始め「すごいぞ！JSXもCDNで動いたんだ！」 - クモのようにコツコツと

Reactを習得するためにやったことまとめ
qiita.com

作ってみたもの

今回も掌田さんの「React.js & Next.js超入門」を参考に進めています。

React.js&Next.js超入門

さっそくですが、今回作ってみたものはこちら！

See the Pen React 09 by イイダリョウ (@i_ryo) on CodePen.

架空の新番組、戦隊ヒーロー「リアクト5」の紹介、みたいな感じ。一人ひとりの色や文字サイズが変わっている（イエローは食いしん坊設定にしていますw）

HTMLコード

<section>
    <h1>りあくと戦隊</h1>
    <div class="text">読み込み中…</div>
</section>

HTMLはこれまでと変わらない。「読み込み中…」となっている.text部分をReactで置き換えている。

JSXのコード

Reactのコードはこちら

//DOM取得
const text = document.querySelector('.text');

//JSXに埋め込む値
const h2Text = "新番組！リアクト5、始まる！";
const pText = "さいきょうの5人、現る！";

const msgReact5 = (msg, size, color) => {
    const styleReact5 = {
        margin: "0 0 10px",
        padding: "10px",
        background: color,
        borderRadius: "5px",
        fontSize: size + "px",
        fontWeight: "bold",
        color: "#fff",
    }
    return <p style={styleReact5}>リアクト{msg}！</p>
}

//JSXの中身
const elm = (
<section className="h2_elem">
    <h2>{ h2Text }</h2>
    <p>{ pText }</p>
    <ul className="react5">
        <li>{msgReact5('レッド', 30 ,'red')}</li>
        <li>{msgReact5('ブルー', 30 ,'blue')}</li>
        <li>{msgReact5('イエロー', 50 ,'#fd0')}</li>
        <li>{msgReact5('グリーン', 30 ,'green')}</li>
        <li>{msgReact5('ピンク', 25 ,'pink')}</li>
    </ul>
</section>
);

//レンダリング
ReactDOM.render(elm, text);

前回はJSXで変数を読み込んだが、今回は関数で別のJSXを読み込んでいる。つまりJSXの入れ子状態！

JSXの変数部分

頭の方は変数部分

//DOM取得
const text = document.querySelector('.text');

//JSXに埋め込む値
const h2Text = "新番組！リアクト5、始まる！";
const pText = "さいきょうの5人、現る！";

• 変数textでDOMの.textを取得
• 変数h2Textにh2タグのテキストを設定
• 変数pTextにpタグのテキストを設定

ここまでは前回と共通する内容。

JSXの関数部分

次に関数部分を見ていく。

const msgReact5 = (msg, size, color) => {
    const styleReact5 = {
        margin: "0 0 10px",
        padding: "10px",
        background: color,
        borderRadius: "5px",
        fontSize: size + "px",
        fontWeight: "bold",
        color: "#fff",
    }
    return <p style={styleReact5}>リアクト{msg}！</p>
}

• 変数msgReact5に無名関数を代入。引数は3つでmsg、size、color
• 無名関数の中に変数styleReact5でCSSスタイルを設定
• スタイルの中で引数を読み込んでいる
  backgroundで第2引数colorを
  fontSizeで第3引数sizeを
• returnでJSXのpタグを返す
  pタグのstyle属性でstyleReact5のCSSスタイルを読み込む
  テキスト部分で第1引数msgを読み込む

JSXの本体

JSXの本体部分。先程の関数を読み込んでいる。

//JSXの中身
const elm = (
<section className="h2_elem">
    <h2>{ h2Text }</h2>
    <p>{ pText }</p>
    <ul className="react5">
        <li>{msgReact5('レッド', 30 ,'red')}</li>
        <li>{msgReact5('ブルー', 30 ,'blue')}</li>
        <li>{msgReact5('イエロー', 50 ,'#fd0')}</li>
        <li>{msgReact5('グリーン', 30 ,'green')}</li>
        <li>{msgReact5('ピンク', 25 ,'pink')}</li>
    </ul>
</section>
);

//レンダリング
ReactDOM.render(elm, text);

• 変数elmでJSXを設定
• JSXのh2タグでh2Textのテキストを読み込み
• JSXのpタグでpTextのテキストを読み込み
• JSXのliタグでmsgReact5()を読み込み、引数に固有値を設定
• ReactDOM.render()でelmをレンダリングしてtextに返す

これによってJSXの中に別のJSXの関数を入れ子で読み込み、尚且つ、引数で一つひとつに固有値を適用している！

ちなみに、デベロッパーツールをよく見るとこんなエラーが出ていた。

Warning: Unknown DOM property class. Did you mean className?

警告：不明なDOMプロパティクラス。 classNameを意味しましたか？

sectionやulタグの中のclass属性についてのようだった。

どうもJSXではclassは予約語になるため、タグの中のclass名をclassNameを書かないといけないらしい。（書き換えたらエラーが消えた）

※参考：ReactのJSX構文内でclass属性を設定する場合 - 脳汁portal

CSSのスタイル名もハイフン部分は削除して大文字（キャメルケース）にする必要があったり、細かい違いがあるので注意したい。

※参考：今からはじめるReact.js〜スタイルの適用〜 - Qiita

キャメルケースについてはこちら。

※参考：https://designsupply-web.com/developmentlab/4052/

最後に

今回はJSXの中で別の関数のJSXを読み込み、入れ子にしてみました。これができるとなるとHTMLは1行のコンポーネントのまま、Reactの中で部品化して行ってHTMLを設計する感じになりますね！

次回からは分岐、反復など制御構造的な使い方に入っていきたく思います。それではまた！

---

Reactを習得するためにやったことまとめ
qiita.com