Typescript+React中如何自定义类似Formik的渲染属性向子组件传参？

这种模式的官方名称是渲染属性（Render Props），也常被称为「函数作为子组件（Function as Child Component, FaCC）」模式，核心逻辑是组件将内部的状态/方法作为参数传递给子级的函数，由调用方自行决定渲染内容，是React中常见的灵活复用组件逻辑的方案。

实现逻辑非常简单，你只需要在自定义组件中，把children当做函数调用，同时把你想要暴露给外部的变量/方法作为参数传入即可，对应示例的实现代码如下：

// MyComponent 内部实现
const MyComponent = ({ name, children }) => {
  const myCoolConst = "George"
  // 其他内部状态、方法、业务逻辑都可以在这里定义

  // 核心逻辑：调用children函数，传入需要暴露给外部的参数
  return children({ myCoolConst, name })
}

// 外部调用方式，和你期望的写法完全一致
const App = () => {
  return (
    <MyComponent name="Hello">
      {({ myCoolConst, name }) => (
        <text>{name} {myCoolConst}</text>
      )}
    </MyComponent>
  )
}

如果你使用TypeScript，可以给组件加上如下类型定义获得完整类型提示：

import type { ReactNode } from 'react'

// 定义要暴露给外部的参数类型
type MyComponentRenderParams = {
  myCoolConst: string
  name: string
}

type MyComponentProps = {
  name: string
  // 声明children是接收指定参数、返回React节点的函数
  children: (params: MyComponentRenderParams) => ReactNode
}

const MyComponent = ({ name, children }: MyComponentProps) => {
  const myCoolConst = "George"
  return children({ myCoolConst, name })
}

不属于反模式，这是React官方认可的合法组件设计模式。

• 优势是灵活度极高，你只需要封装通用逻辑，渲染逻辑完全交给调用方自定义，非常适合Formik这类表单封装、通用列表、弹窗交互等需要固定逻辑+自定义渲染的场景。
• 唯一需要注意的是，在React Hooks普及之后，很多纯逻辑复用的场景可以用自定义Hook替代，写法更简洁。但如果你的封装需要和组件生命周期、JSX结构绑定，渲染属性模式依然是最优选择之一。

内容的提问来源于stack exchange，提问作者calamitykebab