![]() ![]() Fragments solve this problem."Īnd my understanding is partly based on your and Dan's excellent comments on this issue #8920 (comment) which references the idea of a "separate syntax" that "could let React distinguish between the case where keys are necessary (dynamic lists), and the static lists. Post 3: "return an array of elements has problems.you have to add a key property to each element to avoid React warnings. Post 1: "Using the Fragment component, we can now accomplish the same without the array syntax and without using keys." (emphasis mine) I'm also clearly not the only person confused here: Is that new since 16.2.0? (That's the version that we're on.) I just revisited my code and was able to reproduce the behavior where I get a key warning with an array and no key warning with a thanks also for the jsfiddle – I think that is exactly my problem. ![]() If you return the same element types, it keeps those components/DOM nodes around, even if all the props changed. ![]() Each time React renders your components, it's calling your functions to retrieve the new React elements that it uses to update the DOM. If you use the shorthand syntax for fragments <> </>, you won't be able to pass any props to the fragment.Fragments are used when we need to group a list of children without adding extra nodes to the DOM. Thanks for the jsfiddle I'm shocked to see a Fragment giving key warnings, because I've never seen that behavior before. React's key prop gives you the ability to control component instances. We used the more verbose syntax for React fragments to be able to add a key prop to the fragment. Please let me know if I've misunderstood any of this – I figure that's more likely than not □ To Reproduce Steps to reproduce the behavior: Go. React.Fragment can only have key and children props. The dual behaviors make a lot of sense to me (if React can't figure out on its own whether siblings need keys, it's great for us to have a way to explicitly tell it when they do or don't) but it seems to me that such an important and subtle nuance would call for a lot of documentation and instead has none that I can find. Describe the bug Display at the console: Warning: Invalid prop role supplied to React.Fragment. Instead, I don't believe it's mentioned at all. But if we're relying on that expectation to avoid a major gotcha, I would assume it would be explicitly mentioned in the docs for fragments, and prominently featured in a warning-style yellow box. Right now, I believe you can make a dynamic list of elements, throw it in a fragment, and get no key warning message – but have bad performance and non-stable updates.Īs best as I can tell, the reason for the difference in behavior is that fragments are expected to be understood as having a different semantic meaning than arrays, to be used for static content only. But I learned today that that is not the case. Until today I assumed that meant "ah, React 16.2 introduced some clever new tech that obviated the need for keys". (Apologies if this has been discussed before, I searched and didn't find anything.)Ĭurrently if you create an array of elements without keys you get a key warning message, and if you create a fragment of elements without keys you do not. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |