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的资料型态是如何

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)