iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
Modern Web

看初心者怎麼學React系列 第 11

Day11 React Props(二) children

除了在元件標籤上設定屬性傳入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的資料型態是如何

https://ithelp.ithome.com.tw/upload/images/20210926/20140303ArYwbRsPTZ.png

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

畫面
https://ithelp.ithome.com.tw/upload/images/20210926/20140303agWs0rK6w7.png


那如果在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語法的結構拆成三個不同的資料,以陣列的方式存放。

https://ithelp.ithome.com.tw/upload/images/20210926/20140303hIxaBfbqzL.png

會將每個value依序渲染在畫面上。
https://ithelp.ithome.com.tw/upload/images/20210926/20140303LZzQDUce5m.png


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)

上一篇
Day10 React Props
下一篇
Day12 Functional Component的state - useState
系列文
看初心者怎麼學React30

尚未有邦友留言

立即登入留言