react 函数子组件(Function ad Child Component)

今天学习了react中的函数子组件的概念，然后在工作中得到了实际应用，很开心，那么好记性不如烂笔头，开始喽~

FaCC，利用了react中children可以是任何元素，包括函数的特性，那么到底是如何进行增强呢？

import * as React from 'react' import { get } from '../../common/fetch' import { handleNotificate } from '@hi-ui/hiui/es/notification' export default class WithRangeData extends React.PureComponent { constructor (props) { super(props) this.state = { data: [] } } componentDidMount () { // 从props中接收url，然后制作data，存入到自己的state中，具体处理逻辑，大家不用看 const { url } = this.props get(url) .then(res => { if (res && res.status === 200) { const result = [] res.data.forEach(element => { const { status, value } = element switch (status) { case 0: result.push({ name: value, id: value }) break default: } }) this.setState({ data: result }) } else { handleNotificate({ type: 'erroe', autoClose: true, title: '请求出错', message: `请求出错，原因：${res.message}` }) } }) } render () { const { children } = this.props const { data } = this.state // 这里是关键，将自己state中的值，传给children，直接执行了children()， 说明children是个函数 return <div> {children(data)} </div> } }