Передача реквизита компоненту внутри компонента более высокого порядка

Question

Я пытаюсь понять, как передать реквизит компоненту, который упакован компонентом более высокого порядка. У меня есть компонент высшего порядка, записанный так:

import React from 'react'

function withAuth(Layer){

   return class AuthenticatedHOC extends React.Component{

      componentDidMount(){
         if (!this.props.token){
            authenticateEsri()
         } 
      }

      render(){
         return (
            <>
               {this.props.token && <Layer {...this.props} />}
            </>
         )
      }

   }

}

const mapStateToProps = state => ({
   token: state.data.layers.esri.access_token
})

export default compose(
   connect(mapStateToProps),
   withAuth
)

Довольно просто. HO C проверяет, находится ли токен аутентификации в хранилище приставок. Если это не так, он вызывает API, чтобы получить токен. Оказавшись там, он рендерит обернутый компонент с токеном аутентификации как реквизит. Средний компонент, который используется в качестве аргумента в этом HO C, выглядит следующим образом:

import { withLeaflet, MapControl } from "react-leaflet";
import * as EsriLeaflet from "esri-leaflet";
import withEsriAuth from './withAuth'

class Layer extends MapControl {
   createLeafletElement(props) {
      const layer = EsriLeaflet[props.layerType]({
         ...props
      })
      return layer;
   }

   componentDidMount() {
      const { map } = this.props.leaflet;
      this.leafletElement.addTo(map);
   }
}

export default withEsriAuth(withLeaflet(Layer))

Некоторые слои требуют токен авторизации, а некоторые нет. Передача токена слою, который не требует его, вызывает ошибку, равно как и передача токена слою, для которого он не требуется. То, что я хочу сделать, это отделить withEsriAuth от EsriLeafletLayer компонента. Вместо того, чтобы EsriLeafletLayer каждый раз заключать в withEsriAuth, я хочу иметь возможность решить, использовать ли аутентификацию HO C каждый раз, когда я объявляю Layer. В нынешнем виде я могу объявить компонент следующим образом:

<Layer url="somelayerurl.com" opacity={0.5} />

И он будет каждый раз запускать аутентификацию. Я предпочел бы export default withLeaflet(Layer), а затем объявить что-то вроде этого:

withAuth( <Layer url="somelayerurl.com" opacity={0.5} /> )

Однако это не работает - это говорит мне, что функция не является допустимым дочерним элементом реагировать. Я знаю, что с этим синтаксисом что-то выглядит странно, и что должен быть более правильный способ написать это.

Спасибо за чтение.