React组件中向props.children传递数据
我们都知道在 React 组件中向子组件传递数据很容易，但是如何向 props.children 传递数据呢？
最近在做一个倒计时组件，就涉及到向 props.children()传参，实际上ButtonGroup/CheckboxGroup 等组件也时常会遇到相同的情况，所以今天我们来探究一下props.children()。
向子组件传参
将需要传递的数据放到props里面即可，例如：
<div className={styles.header}> <HeadSwiper bannerList={productImgList}/> </div> 复制代码上面示例就是简单的向HeadSwiper传递图片列表数据。
通过props.children()传参
这里以倒计时组件为例，countDown组件需要将计算后的时分秒传给他的子元素，子元素通过一个回调函数获取这个参数，如下所示：
// layout const renderCountDown = useCallback( ({ dayNum, dayStr, hourStr, minuteStr, secondStr }) => { return ( <RenderCountDown auctionStatus={auctionStatus} dayNum={dayNum} dayStr={dayStr} hourStr={hourStr} minuteStr={minuteStr} secondStr={secondStr} /> ) }, [auctionStatus] ) <CountDown className={styles['countdown-container']} leftTime={remainTime} onEnd={props.handleCountDownDone} > {renderCountDown} </CountDown> 复制代码那个countdown组件里面又是如何将dayNum, dayStr, hourStr, minuteStr, secondStr这几个参数传出来的，让我们看下具体实现：
/** * @description: 格式化剩余时间 * @param {type} 剩余时间 * @return: rest对象 */ const formatRestTime = (t) => { const ts = t const rest = { dayStr: '00', hourStr: '00', minuteStr: '00', secondStr: '00', dayNum: 0, hourNum: 0, minuteNum: 0, secondNum: 0 } // ... return rest } function CountDown (props) { const { leftTime, onEnd } = props const [restTimeObj, setRestTimeObj] = useState(() => formatRestTime(Math.round(leftTime / 1000))) // ... return <div className={props.className}>{props.children(restTimeObj)}</div> } export default React.memo(CountDown) 复制代码countdown组件里面使用props.children(restTimeObj)的方式将restTimeObj对象传给了他的children。
总结
记录一种参数传递的方式，但是我在官网没有找到相关操作的文档，如果有小伙伴对这一部分比较熟悉，欢迎留言讨论，作者自己其实也没太学习明白，太难了~ ????
作者：道系小布丁
链接：https://juejin.cn/post/7039269294600880165