什么是React函数作为子组件

什么是React函数作为子组件(React functions As Children)

函数作为子组件是一种模式,允许你将渲染函数作为 Children 属性传递给组件,以便您可以更改可以作为子组件传递给组件的内容。


使用

当你使用Function作为子组件时,可以将子组件指定为函数,而不是传递JSX标记。

tsx 复制代码
    // index.tsx
    <Foo>
        {(name) => <div>`hello from ${name}`</div>}
    </Foo>

Foo组件应该长这样

tsx 复制代码
    // Foo.tsx
    const Foo = ({ children }) => {
        return children('foo')
    }

例子

将函数作为子组件的高级示例。

tsx 复制代码
    // PageWidth.tsx
import React from 'react'
class PageWidth extends React.Component {
  state = { width: 0 }
  componentDidMount() {
    this.setState({ width: window.innerWidth })
    window.addEventListener(
      'resize',
      ({ target }) => {
        this.setState({ width: target.innerWidth })
      }
    )
  }
  render() {
    const { width } = this.state
    //渲染传过来的函数
    return this.props.children(width)
  }
}

使用方式

tsx 复制代码
    // index.tsx
    <PageWidth>
        {(width) => <div>{width}</div>}
    </PageWidth>

正如在上面所看到的,children 被"重载"并作为函数传递给 PageWidth ,而不是按照自然的方式传递给 ReactNodeListPageWidth 组件的 render 方法调用 this.props.children (传递宽度),该方法返回渲染的 JSX。

在此示例中可以看到渲染回调的真正威力。 PageWidth 将完成所有繁重的工作,而渲染的具体内容可能会发生变化,具体取决于传递的渲染函数。


其他使用方式

点击展开/折叠

tsx 复制代码
    //HTTPPOST.tsx
import { Component, ReactNode } from 'react';
import axios, { AxiosResponse } from 'axios';
interface Props<T> {
    url: string;//url
    condition: unknown;//参数
    loading?: ReactNode;//loading
    children: (data: T) => ReactNode;//渲染组件
    dataOperate: (data: T) => T;//数据处理
    error?: ReactNode;//错误渲染
}
interface State<T> {
    data: T;
    component: ReactNode;
}
export default class POST<T> extends Component<Props<T>, State<T>> {
    state: State<T> = {
        data: {} as T,
        component: this.props.loading || '',
    };
    async componentDidMount() {
        const { url, error, condition, children, dataOperate } = this.props;
        try {
            const result: AxiosResponse<T> = await axios.post(url, condition);
            const processedData: T = dataOperate(result.data);
            this.setState({
                data: processedData,
                component: children(processedData),
            });
        } catch (e) {
            this.setState({ component: error || 'error' });
            throw e;
        }
    }
    render() {
        return this.state.component;
    }
}

使用

tsx 复制代码
    //index.tsx
const props = {
    url: '123321',
    condition: {},
    loading: <span>loading 一下</span>,
    dataOperate: (data) => {
        return data.sort((a, b) => a - b);
    },
    error: <span>出错了!</span>,
}
 <HTTPPOST {...props}>
            {
                (data) => {
                    return data.map(item => {
                        <span>{item}</span>
                    })
                }
            }
</HTTPPOST>

转译自 reactpatterns

相关推荐
清羽_ls5 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
mapbar_front10 小时前
react项目开发—关于代码架构/规范探讨
前端·react.js
需要兼职养活自己11 小时前
react高阶组件
前端·react.js
今天周二11 小时前
vite 将react老项目中的没有兼容处理的写法转成兼容性写法
react.js
GISBox12 小时前
GISBox如何让GeoTIFF突破Imagery Provider加载限制?
react.js·json·gis
天蓝色的鱼鱼13 小时前
Next.js 渲染模式全解析:如何正确选择客户端与服务端渲染
前端·react.js·next.js
果粒chenl16 小时前
React学习(四) --- Redux
javascript·学习·react.js
LRH18 小时前
React 双缓存架构与 diff 算法优化
前端·react.js
中微子19 小时前
别再被闭包坑了!React 19.2 官方新方案 useEffectEvent,不懂你就 OUT!
前端·javascript·react.js
1in19 小时前
一文解析UseState的的执行流程
前端·javascript·react.js