React Props Children 传值

作者 : jamin 本文共1315个字,预计阅读时间需要4分钟 发布时间: 2020-10-18 共1217人阅读

React Props Children 传值

背景是在使用 umijs 框架时,它提供一个根节点 layout。我想在根节点传值到 Route 组件中却不得其法,后来查阅 issues 得到解答。

props.children 属性

在 React 中 props.children 是一个特殊的存在,它表示该组件的所有节点。组件中 props.children 的值存在三种可能性:

  • 如果当前组件没有子节点,值类型为 undefined
  • 如果当前组件只有一个子节点,值类型为 object
  • 如果当前组件有多个子节点,值类型为 array

在 umijs 中,layout 根节点也是通过 props.children 来引用 Route 页面组件,所以在给 Route 传值时遇到了盲点。

props.children 传值

在一般的 React 组件中,可以很方便的通过 props 传值,但是在 props.children 中如何实现传值呢,也就是怎么样在父组件中对不确定的子组件进行 props 传递呢?

React 提供一个工具方法 React.Children 来处理 props.children。它提供一些有用的方法来处理 props.children

  • React.Children.map:用来遍历子节点,而不用担心 props.children 的数据类型是 undefined 还是 object
  • React.Children.forEach:同 React.Children.map,用来遍历子节点,但不返回对象。
  • React.Children.count:返回 children 当中的组件总数,和传递给 map 或者 forEach 的回调函数的调用次数一致。
  • React.Children.only:返回 children 中仅有的子级,否则抛出异常。

同时 React 提供 React.cloneElement 方法用来克隆并返回一个新的 ReactElement(内部子元素也会跟着克隆),新返回的元素会保留有旧元素的 props、ref、key,也会集成新的 props。

我们将上面两者配合就能实现 props.children 传值:

const App = props => {
  const childrenWithProps = React.Children.map(props.children, child => {
    return React.cloneElement(child, { test: 'test' })
  })
  return <>{childrenWithProps}</>
}

多层传值

在 umijs 中,Layout 与 Route 组件之间隔了两层,所以在 Layout 里传值的话需要 clone 两级,因为第一级是 Switch,然后才是 Route。

React.Children.map(children, child => {
  return React.cloneElement(
    child,
    null,
    React.Children.map(child.props.children, child => {
      return React.cloneElement(child, { test: 'test' })
    })
  )
})

参考文章:
support pass props from layouts to child routes

本站所提供的部分资源来自于网络,版权争议与本站无关,版权归原创者所有!仅限用于学习和研究目的,不得将上述内容资源用于商业或者非法用途,否则,一切后果请用户自负。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源。如果上述内容资对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。本站不保证所提供下载的资源的准确性、安全性和完整性,源码仅供下载学习之用!如用于商业或者非法用途,与本站无关,一切后果请用户自负!本站也不承担用户因使用这些下载资源对自己和他人造成任何形式的损失或伤害。如有侵权、不妥之处,请联系站长以便删除!
金点网络 » React Props Children 传值

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
是否提供免费更新服务?
持续更新,永久免费
是否经过安全检测?
安全无毒,放心食用

提供最优质的资源集合

立即加入 友好社区
×