Comments (7)
After writing this issue out and going back to tinker with keys and refs a bit. I am sort of in the same boat as you, kind of confused on the API. So I created an issue to discuss it on metal. metal/metal.js#129
We can figure out the formatting issue after that discussion is fleshed out.
from liferay-frontend-source-formatter.
Heya Bryce,
Since this one has been open for a while and things seem to have changed on the metal side, I'm going to close it out for now.
Please reopen or open a new one if we still need to work out the details of this one.
Thanks Bryce,
from liferay-frontend-source-formatter.
Thanks for filing the issue Bryce.
I've been thinking this over for a while since the port over to metal, so my initial idea was to allow that to be defined with a custom rule, such as:
"csf-jsx-key": [2, "ref"]
But are you saying you guys need to support both?
Meaning, should it look for the existence of any "key" attribute, or do you only need to support one?
from liferay-frontend-source-formatter.
We would need to support both, and if possible warn of each unique instance.
If possible the warnings would emit for
// For component
array.map(
(item, i) => (
// no warning
<MetalComponent ref={i} />
// warn that key is being passed instead of ref
<MetalComponent key={i} />
// warn that no ref is being passes
<MetalComponent />
)
)
// For element
array.map(
(item, i) => (
// no warning
<div key={i} />
// warn here that ref is being used instead of key
<div ref={i} />
// warn here that key is not being passed
<div />
)
)
let me know if that makes sense
from liferay-frontend-source-formatter.
Hmm... okay, I think I'm a bit confused.
Couldn't both attributes be passed to both elements and components at the same time?
Also, are ref
's required on components?
I'm thinking if they're used for the exact same thing on elements and components, I would imagine they should be named the same thing.
The reason I'm asking is because I can create the rule to do what you're saying, but I would prefer that the metal API was more consistent in this regard.
What do you think?
from liferay-frontend-source-formatter.
The difference is that a ref
is stored in memory of the component
<ParentComponent>
<Child ref="childComponent" />
</ParentComponent>
ParentComponent can now access the child via this.components.childComponent
However, a static html element such as a <div />
can not be given a ref. A key
is given specifically for when there are multiple conditionally rendered items such as a list.
Refs are also used to track the internal components when they are conditionally rendered with different state.
<ParentComponent>
<Child name="foo" ref="child1" />
{someBool &&
<Child name="bar" ref="child2" />
}
<Child name="baz" ref="child3" />
</ParentComponent>
When using refs keep track of component state, whereas a key is just for ordering. When adding a ref to a component, a key is internally provided as this.key = this.ref
. This way we never need to add both key and ref.
I think the overall purpose of a ref
is to identify some internal state to a given component and the purpose of key
is for ordering of conditionally rendered elements.
Let me know if that makes a little more sense.
from liferay-frontend-source-formatter.
Hey Nate,
Metal doesn't require keys or refs for components in an array. It's "supposed" (there were some bugs where it wasn't that are now fixed) to handle that case behind the scenes.
Source formatter shouldn't be flagging 'Missing "key" prop for element in array" when using metal.
from liferay-frontend-source-formatter.
Related Issues (20)
- The source code did not change at all. Why? HOT 4
- New lines are being added between comments and logic HOT 4
- Unclear warning: "function declaration was used before it was defined" HOT 2
- Integrate with Prettier HOT 13
- SF fails with "try" string and break methods in .js files HOT 2
- Less verbose output HOT 2
- Convert to monorepo? HOT 3
- Add VSCode extension HOT 2
- Force new line on HTML attributes when there are more than two properties (Soy, JSX) HOT 4
- Enforce/disallow HTML void tags' slash HOT 2
- Explanation for "Block level containers need either a class or id" HOT 4
- Wrap JSDoc comments to 80 columns HOT 3
- Running the source formatter breaks some functions calls HOT 2
- Force/disallow new line when chaining HOT 1
- Forcing on code block braces breaks indentation HOT 3
- Force concrete formatting for long conditionals HOT 5
- Force function newline for each parameters HOT 2
- Force newline between different "code blocks" HOT 2
- Provide linting for arrow function parens HOT 1
- Force more consistent JSDoc typing HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from liferay-frontend-source-formatter.