Реагировать на доступ к самопреобразованию без расширения класса / функции

Question

Я создаю пользовательский компонент в React Native, который будет автоматически управлять компонентами, передаваемыми как дочерние.

Этот компонент также добавит настраиваемые реквизиты для дочерних элементов.

Однако одно предостережение заключается в том, что дочерние компоненты не могут использовать эти реквизиты напрямую; вместо этого необходимо создать SF C или расширить React.Component, чтобы получить доступ к объекту props этих потомков.

Мне было интересно, есть ли способ получить доступ к этим добавленным реквизитам, не делая этого ?

В приведенном ниже коде, например, я хотел бы получить доступ к managerProp следующим образом:

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

Answer 1

Способ сделать это состоит в том, чтобы ваш ManagerComponent выставил реквизит рендера (в основном это функция, которую он будет вызывать для рендеринга своих детей). Он может передать свои «дополнительные» реквизиты этой функции. Вы можете использовать дочерние элементы в качестве рендеринга, что приводит к чему-то вроде:

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>
  )
}

Вот статья в блоге (не моя), в которой эта концепция обсуждается более подробно.