問題:該如何顯示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,因此不會顯示任何資訊。