React中使用Wrapper组件包裹子组件能否实现props共享？

结论 #

默认情况下，示例中的Image与House组件无法直接获取到传入Wrapper的myprops属性。

原因说明 #

React 的组件 props 是相互隔离的，你传给Wrapper的属性只会被Wrapper自身接收，不会自动透传给它包裹的子元素，子元素默认只能拿到自己被直接声明时传入的属性。

实现props共享的方案 #

如果需要让Wrapper下的直接子组件拿到myprops，可以在Wrapper组件内部通过React.Children.map遍历子元素，配合React.cloneElement给子元素批量注入属性，示例实现如下：

import React from 'react'

const Wrapper = ({ myprops, children }) => {
  // 遍历所有子节点，仅对合法的React元素注入props
  return React.Children.map(children, child => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { myprops })
    }
    return child
  })
}

// 调用侧和你给出的示例完全一致即可
const name = "Test"
return (
    <Wrapper myprops={name}>
      <Image/>
      <House/>
    </Wrapper>
)

完成上述改造后，Image和House就可以通过props.myprops拿到传入的值了。如果有深层嵌套的子组件需要共享该属性，更推荐使用 React Context API 来实现全局透传。

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