Javascript 在不扩展类/函数的情况下访问自我道具

我正在React Native中构建一个自定义组件，它将自动管理作为子级传递的组件

此组件还将向子级添加自定义道具

但有一个警告是，儿童组件无法直接使用这些道具；相反，创建SFC或扩展React.Component是访问这些孩子的props对象所必需的

我想知道是否有一种方法可以访问这些添加的道具而不必这样做

例如，在下面的代码中，我希望能够像这样访问managerProp：

<ManagerComponent>
  <Child onPress={ managerProp.handleOnPress }>
    {managerProp.something}
  </Child>
</ManagerComponent>

---

实现这一点的方法是让ManagerComponent公开一个render prop，它将调用该函数来渲染其子对象。它可以将额外的道具传递给该功能。您可以使用子对象作为渲染道具，这会导致以下结果：

function ManagerComponent({children}) {
   const extraProps = {handleOnPress: ..., ...}
   // The trick is we call children as a function instead
   // of treating it as a component to render
   return <div>{children(extraProps)}</div>
}

ManagerComponent.propTypes = { children: PropTypes.func.isRequired }

function Foo() {
  return (
     <ManagerComponent>
        {managerProps => (
          <Child onPress={managerProps.handleOnPress}>
             {managerProps.something}
          </Child>)
        }
     </ManagerComponent>
  )
}

---

这里有一个不是我的，它更详细地讨论了这个概念。

你是如何给孩子们添加道具的？我使用的是React.cloneElementchild，{additionalProps={…}。这是在React Native的FlatList组件的renderItem回调中调用的。本文中使用的方法看起来与使用{managerOps=>{…}}arrow函数作为普通SFC函数一样，但不需要在代码中的其他地方实际编写该函数。我理解对了吗？有点。渲染函数lambda具有包含组件的上下文，可以使用其状态和变量。