Reactのリスト表示について

Question

わからないこと：下記の<ul>{itemObj}</ul>部分について

なぜ

<ul>
　<li>要素１</li>
　<li>要素2</li>
　<li>要素3</li>
　<li>要素4</li>
</ul>

と解釈されるのかが分かりません。itemObjは配列なので、

<ul>{itemObj}</ul>
↓
<ul>[要素１,要素２,要素３,要素４</ul>

のようにはならないのでしょうか？配列内の要素を順番に列挙する処理を書いていないことが不思議でなりません。(※keyがないことについてはノータッチで大丈夫です。)

ソース

class RList extends React.Component {
    render() {
        const title = this.props.title
        const items = this.props.items.split(',')
        const itemObj = items.map(
            (e) => {
                return <li>{e}</li>
            }
        )

        if (!title) { title = "LIST" }
        console.log(itemObj)
        console.log(title)
        return (
            <>
                <h1>{title}</h1>
                <ul>{itemObj}</ul>
            </>
        )
    }
}


ReactDOM.render(<RList title="Colors" items="Red,Green,Blue,White" />, document.getElementById('root'))

Answer 1

と解釈されるのかが分かりません。

そういう仕様です（React公式）。

Comments

[maisumakun]

「要素の配列をそのまま配列として解釈する」より「要素の配列は展開してレンダリングする」ほうが便利なので、Reactがそう設計されている、というだけの話です。

[tys.prg]

本当にありがとうございました。リファレンスもっとちゃんと読みます。