-
-
Save benmvp/69799153880d42d2ef2bb9f1ff9012b8 to your computer and use it in GitHub Desktop.
const myHOC = <Props: {}>( | |
Component: React.ComponentType<{}> | |
): React.ComponentType<Props> ( | |
(props: Props) = { | |
let handlers = genDynamicAdditionalProps(props.eventName) | |
// The keys in `additionalProps` are dependent upon `props.eventName` value | |
// The values in `additionalProps` are all functions | |
let propsToPassThru = {...props} | |
delete propsToPassThru[props.eventName] | |
// Also removing `props.eventName` from `props`! | |
return ( | |
<Component | |
{...propsToPassThru} | |
{...handlers} | |
/> | |
) | |
} | |
) |
Is it possible to enumerate the set of possible cases (event name and what types it maps to)? Like if there are three possible cases with types, we can express that. If it's truly arbitrary, theres not much more we can say statically.
Yeah.... eventName
can basically be any DOM event (when Component
is a DOM element) or literally any function prop (when Component
is a React Component). So it seems like I've hit the max of static typing. I do know eventName
is a string
, but that's about it.
I was assuming it wasn't possible to statically type, but I wanted to make sure there wasn't any fancy syntax since I do in theory know that the initial props include eventName
, but exclude handlers
and the resultant props exclude eventName
, but include handlers
.
Thanks for the help!
Hmm, it’s hard to say without know the details of why the code is this way and what the other constraints are. It seems like something must be knowable statically, since whoever wrote the inner component’s code had to develop an idea of which props to expect in which cases and whoever uses the wrapped component must have an idea of which props other than th event name they need to pass in.
So anyways, if you want to go into more detail on why this exists I’m happy to try to help. Or if you’re happy to drop it, then so am I. Best of luck with your project either way!
Sorry, I missed your post! I would love to figure out a way to make it work if you're up for it. It'll certainly help me learn more Flow along the way.
So what I put in the gist is stripped down version of the full code, which is part of benmvp/react-composite-events#9. Essentially there's a function that takes a configuration of options that ends up returning the HOC above. So props.eventName
in the example above ends up being props[eventPropName]
, making it even more dynamic.
In case you're curious what this is all about, here are the docs for the utility function: https://github.com/benmvp/react-composite-events/blob/master/src/compose.md
Thanks for the help!
I'm trying to make line 2 something more specific than just
{}
. Been following the Injecting Props With a Higher-Order Component example, but my HOC adds in dynamic props that are based on the value of a prop. Therefore the keys ofhandlers
are not statically known.Is this even possible?