複数の React 要素を子に持つ React 要素の作成

複数の子要素を持つ React 要素の作成

前のページでは、文字だけの子要素を持つ React 要素を作成しました。

ここでは、複数の子要素をもつ React 要素を作成してみましょう。子要素が単なる文字ではなく「子要素も React 要素である」という点も前回と違います。

例として、HTML の ul と li 要素を考えましょう。作成するのは次のように、ul 要素が３つの li 要素を持つ状況です。

<ul>
  <li>Hermosa Beach</li>
  <li>Santa Monica</li>
  <li>Long Beach</li>
</ul>

React 要素ではどのように書けば良いでしょうか。

React 要素を React.createElement() メソッドを作って構成すると、次のように書けます。

var li1 = React.createElement('li', null, 'Hermosa Beach')
var li2 = React.createElement('li', null, 'Santa Monica')
var li3 = React.createElement('li', null, 'Long Beach')
var ul = React.createElement('ul', null, li1, li2, li3)

簡単に説明すると、1行目から3行目まではそれぞれ、 HTML の li 要素として作成される要素であり、 プロパティなし、子要素は文字 (Hermosa Beach など)　です。

4行目では HTML の ul 要素として React 要素を作成して、プロパティなし。そして、li1、 li2、 li3　を React.createElement() メソッドの第3から第５引数として渡すことで、それらを子要素に設定しています。

子要素の配列を渡して React 要素を作成する

上の方法のほか、次のように配列として一度に複数の子要素を渡す方法もあります。

var li1 = React.createElement('li', { key: 1 }, 'Hermosa Beach')
var li2 = React.createElement('li', { key: 2 }, 'Santa Monica')
var li3 = React.createElement('li', { key: 3 }, 'Long Beach')
var ul = React.createElement('ul', null, [li1, li2, li3])

React API に React 要素を配列の要素として渡す場合には、それぞれの React 要素にキーを設定します。 1行目から3行目にプロパティとして記載してある { key: 1 } などの箇所がキーの指定箇所です。

尚、念のためいうと、キーを設定するのは子要素のときに限った話ではなく、配列で要素を渡した場合の一般的な話です。

例えば、次の例のように ReactDOM.render() メソッドの第一引数に配列で複数の要素を渡す場合にも、 やはりキーの設定が必要です。

var h1 = React.createElement('h1', { key: 100 }, 'Beach Cities')
var li1 = React.createElement('li', null, 'Hermosa Beach')
var li2 = React.createElement('li', null, 'Santa Monica')
var li3 = React.createElement('li', null, 'Long Beach')
var ul = React.createElement('ul', { key: 101 }, li1, li2, li3)
ReactDOM.render([h1, ul], document.getElementById('root'))

map 関数を使って React 要素の配列を作成

上の例では、 Hermosa Beach とか Santa Monica などのデータ部分が、 コードに直接書き込まれた形になっているので、この点を修正しておきましょう。

// データ部分
const title = 'Beach Cities'
const cities = ['Hermosa Beach', 'Santa Monica', 'Long Beach']
// コード
var h1 = React.createElement('h1', { key: 100 }, title)
var li = cities.map((city, i) => React.createElement('li', { key: i }, city))
var ul = React.createElement('ul', { key: 101 }, li)
ReactDOM.render([h1, ul], document.getElementById('root'))

6行目で map関数を利用して、配列 cities から React 要素の配列を作成しています。

このときキーとしては、配列のインデックスを利用しています。