Slot Polymorphism cloning technique #577
andresin87
announced in
Architecture Decision Record
Replies: 2 comments 1 reply
-
Love the specs for Slot :) Regarding the problem at the end, I'm not sure if it is resolved with |
Beta Was this translation helpful? Give feedback.
1 reply
-
Can this discussion be closed since we are already using |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Slot Polymorphism cloning technique
Status
Context
SLOT
React allows you to pass children to a component by nesting them inside its JSX tag.
Slot component inject its given props to that children applying a set of rules
POLYMORPHISM
For applying React polymorphism there are 2 different ways:
as: (reactElement)
prop: for element tag-names (strings), or ReactComponentsasChild: boolean
prop: in case of setting it to true, user can declare what element needs to look like the element with that flag and pass it as a children.Given:
element
as
propWhen coding...
...will generate as an HTML result:
Is not possible to determine which is the result in case of prop declared collision without reading the implementation of the Children's prop assignation.
asChild
prop boolean FlagWhen coding...
...will generate as an HTML result:
This functionality gives a deterministic centralized behavior (inside Slot logic)
THE PROBLEM
Combining both techniques had a list of problem when handling the reference
ref
propThe reference (
ref
prop) in Slot componentDecision
What is the change that we're proposing and/or doing?
Consequences
What becomes easier or more difficult to do because of this change?
Beta Was this translation helpful? Give feedback.
All reactions