Understanding the Children Property

問題：該如何顯示component內的elements？

原本的程式如下：

App.js
‘’’=javascript

Testing the Children Property

yolo

‘’’

Person.js
‘’’=javascript

I’m {props.name} and I am {props.age} years old.

‘’’

顯示如下：
‘’’
Testing the Children Property
I’m Max and I am 20 years old.
I’m Sandy and I am 30 years old.
I’m cool and I am 18 years old.
‘’’

解法：在component內加入property的children
Person.js
‘’’=javascript

I’m {props.name} and I am {props.age} years old.

{props.children}

‘’’

輸出：
‘’’
Testing the Children Property
I’m Max and I am 20 years old.
I’m Sandy and I am 30 years old.
yolo
I’m cool and I am 18 years old.
‘’’

補充

1. 這是很重要的觀念，資料不只可以透過property，也有可透過element來passing。同理可知，可以其他HTML code(JSX)在裡面render出來。
2. 問題
   Question：為什麼其他components沒有輸出children的內容？
   Answer：因為介於opening tag和closing tag之間，element 為 undefined，因此不會顯示任何資訊。