组件的子元素只能是规定的元素

原理

React.Children 提供了用于处理 this.props.children 不透明数据结构的实用方法

1. React.Children.map：遍历 children，并返回一个新的 children
2. React.Children.forEach：遍历 children，但不返回新的 children
3. React.Children.count：返回 children 中的组件总数量

实例

Menu 组件内只希望是 MenuItem

// MenuItem 
const MenuItem = () => { ... }
MenuItem.displayName = "MenuItem" // 定义其名字
export default MenuItem

// Menu
import React, { Children, FunctionComponentElement, cloneElement } from 'react'

const Menu = ({ children }) => {
	const filterChildren = () => {
        return Children.map(children, (child, index) => {
            const childElement = child as FunctionComponentElement<MenuItemProps> // 类型断言
            const { displayName } = childElement.type // 取得 displayName
            if (displayName === 'MenuItem') {
                return childElement

                // 为 MenuItem 定义其 index
                // return cloneElement(childElement, { index: index.toString() }) 
            } else {
                console.error('Warning: Menu has a child which is not a MenuItem component') // 警告
            }
        })
    }
    return (
        <ul>{ filterChildren() }</ul>
    )
}