2 ms·
The example you put forward could be resolved through using a router. The router implementations are essentially fancy switches without ”switch”.
by 9wzYQbTYsAIc 5y ago
The example you put forward could be resolved through using a router. The router implementations are essentially fancy switches without ”switch”.
- Eric_WVGG 5y agoyeah, I use reach/router for this kind of thing. A page switcher was just the first example that popped into my head. Here's a real world example if it matters… const Grid = (gridItems) => ( <Grid> {gridItems.map(item => ( <GridItem {...item} key={item._key} /> _} </Grid> )} const GridItem = (props) => { switch(props._type) { case 'image': return <GridImage {...props} /> case 'video': return <GridVideo {...props} /> case 'copy': return <GridCopy {...props} /> // slideshows, 3D stuff, newsletter signup forms… default: return <></> } } … and I suppose a case could even be made for the granularity of this superfluous <GridItem /> component… but regardless this is just a minor annoyance that comes up from time to time.
- methyl 5y agoI'd write it like this const gridComponent = { image: GridImage, video: GridVideo, copy: GridCopy } const Grid = (gridItems) => ( <Grid> {gridItems.map(item => { const GridComponent = gridComponent[item._type] return GridComponent ? <GridComponent {...item} key={item._key} /> : null }} </Grid> )}
- 9wzYQbTYsAIc 5y agoThat’s definitely representative of the compactness that is possible with modern JSX.