Reactの続きです。前回はJSXを事始めて、変数でテキストやCSSスタイルを読み込んでみました。今回はJSXの中に別の関数のJSXを読み込むのをやってみます。JSXの入れ子状態です。それではいきましょう!
【目次】
前回記事
※参考:【React】JSX事始め「すごいぞ!JSXもCDNで動いたんだ!」 - クモのようにコツコツと
Reactを習得するためにやったことまとめ
qiita.com
作ってみたもの
今回も掌田さんの「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
を取得 - 変数
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