12、React组件增强：生命周期方法、第三方库集成与高阶组件

React组件增强：生命周期方法、第三方库集成与高阶组件

1. React.Children API简介

React.Children API为处理特定组件的子元素提供了一系列方法，例如计数、映射、循环遍历，或者将 props.children 转换为数组。同时，还能使用 React.Children.only 来确保只显示单个子元素。

以下是一个简单的示例：

import { Children, PropTypes } from 'react'
import { render } from 'react-dom'

const Display = ({ ifTruthy = true, children }) => 
    (ifTruthy) ? 
        Children.only(children) :
        null

const age = 22
render(
    <Display ifTruthy={age >= 21}>
        <h1>You can enter</h1>
    </Display>,
    document.getElementById('react-container')
) 

在这个例子中， Display 组件只会显示单个子元素，即 <h1> 元素。如果 Display 组件包含多个子元素，