React.Children.toFlatArray #61
Conversation
|
I like the proposal, but I think that there should be a I would prefer a option as (as the # 1 alternative) React.Children.toArray(children, { threatFragmentsChildrenAsChildren: true }) |
| # Drawbacks | ||
|
|
||
| - larger API surface due to the new API | ||
| - the rest of the APIs in the `React.Children` namespace keep their potentially surprising behaviour |
There was a problem hiding this comment.
I would also be surprised by this, not only to sole fact that Fragments are not flattened - as this can be more or less easily memorised, but surprising to me is that regular methods flatten array (& iterators), but not Fragments. This is imho inconsistent slightly and will be even more surprising to see some children being already flattened by no-flattening (taking into account its name) method when you introduce API with the name flat in it.
There was a problem hiding this comment.
Unfortunately I don’t know the motivation behind the current state of affairs but I assume that there are reasons for this intentional inconsistency. Hopefully the developers will explain them in the comments here.
|
In general we've been hesitant to touch Instead, we need to figure out a better long term API to address use cases that are currently served by |
|
I think I have failed to explain my idea well enough. The current behaviour of It would be nice to have a more convenient stop-gap solution until you guys figure out the right approach. |
|
Something like this perhaps? https://github.com/birkir/react-children-addons#toflatarray Example: https://codesandbox.io/s/p33llrxz3q |
|
Is there a solution on the horizon? |
|
I just open-sourced some code from my own projects which handles this (in a specific way which ensures stable keys like |
|
Since https://github.com/grrowl/react-keyed-flatten-children seems to implement this and |
Fragments are not traversed with `React.children.map()` [1][2] so we are using the `react-keyed-flatten-children` bundle to flatten the children to a one-dimensional array. This is necessary to be able to pass props to children of these layouts. [1] https://reactjs.org/docs/react-api.html#reactchildrenmap [2] reactjs/rfcs#61 (comment)
Fragments are not traversed with `React.children.map()` [1][2] so we are using the `react-keyed-flatten-children` bundle to flatten the children to a one-dimensional array. This is necessary to be able to pass props to children of these layouts. [1] https://reactjs.org/docs/react-api.html#reactchildrenmap [2] reactjs/rfcs#61 (comment)
Fragments are not traversed with `React.children.map()` [1][2] so we are using the `react-keyed-flatten-children` bundle to flatten the children to a one-dimensional array. This is necessary to be able to pass props to children of these layouts. [1] https://reactjs.org/docs/react-api.html#reactchildrenmap [2] reactjs/rfcs#61 (comment)
Fragments are not traversed with `React.children.map()` [1][2] so we are using the `react-keyed-flatten-children` bundle to flatten the children to a one-dimensional array. This is necessary to be able to pass props to children of these layouts. [1] https://reactjs.org/docs/react-api.html#reactchildrenmap [2] reactjs/rfcs#61 (comment)
…ansparent containers reactjs/rfcs#61
…ansparent containers reactjs/rfcs#61
* RG-2293 Get rid of side effects in setState updater function of Select component (#7574) * 6.0.50 * RG-2462 switch sidebar and main background in dark theme (#7565) (cherry picked from commit 647dd76) * 6.0.51 * Support passing theme down via React Context (#7592) * 6.0.52 * RG-2420 chore: undeprecate "Badge" in 6.x version * Chore: export GLOBAL_DARK_CLASS_NAME constant [publish] * 6.0.53 * JT-83359 Enable back controlling shortcuts by having '.ring-js-shortcuts' on parent, removed in 473d554 (#7637) * RG-2473 don't unmount react root because it can be reused later (#7656) minor: log auth error * 6.0.54 * Revert "JT-83359 Enable back controlling shortcuts by having '.ring-js-shortcuts' on parent, removed in 473d554" This reverts commit 9192646. * 6.0.55 * Put page reload in timeout for USER_CHANGED event to let all other events to be called. JT-83975 related * 6.0.56 * Chore: add example with dialog with close button inside * RG-2227 Clicking on a select label reopens the dropdown (cherry picked from commit a685a07) * chore: Prevent dialog scroll (#7710) * chore: Prevent dialog scroll * chore: preventBodyScroll should not be passed as a part of restProps * 6.0.57 * Add attributes prop to DatePicker button (#7727) Co-authored-by: Mikhail Cherviakov <[email protected]> * 6.0.58 * [publish] fix breadcrumbs work with React.Fragment containers as a transparent containers reactjs/rfcs#61 * 6.0.59 * Revert "[publish] fix breadcrumbs work with React.Fragment containers as a transparent containers" This reverts commit 704bb21. * 6.0.60 * Fix Table colspan calculation when columns is passed as function * 6.0.61 * Get rid of unused Table maxColSpan prop * RG-2490 support moving cursor from anchor to tooltip (#7754) * RG-2490 support moving cursor from anchor to tooltip * RG-2490 use React for "mouseout" event * 6.0.62 * Check className in QueryAssist shouldComponentUpdate * 6.0.63 --------- Co-authored-by: Veniamin Krol <[email protected]> Co-authored-by: JetBrains Ring UI Automation <[email protected]> Co-authored-by: Filipp Riabchun <[email protected]> Co-authored-by: Alexander Burkov <[email protected]> Co-authored-by: Mihail Ch. <[email protected]> Co-authored-by: Mikhail Cherviakov <[email protected]> Co-authored-by: maksim.erekhinskii <[email protected]> Co-authored-by: Veniamin Krol <[email protected]>
View formatted RFC
Per a suggestion from Dan Abramov: this RFC proposes adding a new API
React.Children.toFlatArrayto get the children as an array while treating theFragmentsas transparent containers.