除了在元件標籤上設定屬性傳入props外，還有props.children這種方法

透過在包在元件的開始、結束標籤中間的Children傳入，讓子元件以props.children接收資料狀態。

父元件

在Child元件標籤中間插入"Text From Children"字串

import React from 'react'
import './All.css';
import Child from './Child';

function Father() {
  return (
  <div className="container">

    <Child > 
    Text From Children  
    </Child>

  </div>
)};

export default Father;

子元件

Child元件接收的參數props

import React from 'react'
import './All.css';

function Child(props) {
	console.log(props)
  return (
    <div>{props.children}</div>
)}

export default Child;

用console.log看一下props的資料型態是如何

props物件中，傳遞的資料會以children屬性的value呈現，所以在子元件中要用props.children來取得資料。

畫面

那如果在Child元件中塞多個標籤節點到props裡呢?

在父元件中的Child標籤中塞入html字串、、試試，子元件結構不動。

父元件

import React from 'react'
import './All.css';

function Father() {
  return (
  <div className="container">

    <Child > 
    Text From Children
    <hr/>
    <div>this is element</div>
    </Child>

  </div>
)};

export default Father;

props.children會判斷JSX語法的結構拆成三個不同的資料，以陣列的方式存放。

會將每個value依序渲染在畫面上。

React.Children的函式

React有提供幾個React.Children的函式讓我們處理在子元件中接收props.children的資料。

• React.Children.map：使用自訂的回調函式，處理props.children陣列裡每個資料項目後，回傳新陣列。(當props.children為空時，會回傳undefined)

React.Children.map(props.children,function[(thisArg)])}

• React.Children.forEach：和map類似但不會回傳陣列，也不能改變資料內容。

React.Children.forEach(props.children, function[(thisArg)])

• React.Children.count：回傳Children陣列中的數量。

React.Children.count(props.children)

• React.Children.only：只能用於Children中只有一個資料的情況，回傳那單獨的資料。有複數個資料在Children中時，會回傳錯誤訊息

React.Children.only(props.children)

• React.Children.toArray：將props.children中的資料轉成一個扁平的陣列，並對每個資料指定一個 key。（後續常用於做資料的排序）

React.Children.toArray(props.children)