如何像Formik一样通过children props实现父子组件数据传递？

你需要让父组件把内部的value通过children props传递给子组件的someData，核心思路是把children当作函数调用，直接传入要传递的数据——这也是Formik这类组件的核心实现方式。

父组件使用方式 #

<Parent>
{(someData)=>(
  <>
   {console.log(someData)}
  </>
)}
</Parent>

原有父组件实现（存在问题） #

const Parent =({children})=>{
const value='Pass to children';

  return ({children})
}

修正后的父组件实现 #

const Parent =({children})=>{
  const value='Pass to children';

  // 把children作为函数调用，传入要传递的value
  return children(value);
}

原理说明 #

这里的children不再是普通的React元素，而是一个接收参数的函数。父组件内部定义好要传递的数据后，直接调用这个函数并传入数据，子组件（也就是这个函数的返回值）就能通过参数someData拿到父组件传递的value了，运行后控制台会输出Pass to children。

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