クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

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

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

【目次】

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

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

作ってみたもの

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

React.js&Next.js超入門

React.js&Next.js超入門

  • 作者:掌田 津耶乃
  • 出版社/メーカー: 秀和システム
  • 発売日: 2019/03/08
  • メディア: 単行本

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

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を取得
  • 変数h2Texth2タグのテキストを設定
  • 変数pTextpタグのテキストを設定

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

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つでmsgsizecolor
  • 無名関数の中に変数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を意味しましたか?

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

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

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

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

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

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

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

最後に

f:id:idr_zz:20200217061448j:plain

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

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


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