Estaba trabajando en una aplicación nativa de reacción y creé un componente común para mostrar elementos de la lista.
<View style={styles.container}> <ItemsWithSeparator style={styles.itemsContainer}> <AppRow /> <AppRow /> </ItemsWithSeparator> </View>Ahora, mi ItemListSeparator solo itera sobre los elementos secundarios y representa la lista, por lo que pensé en convertirlo en un componente sin estado.
const ItemsWithSeparator = function ({children,style}) { const childrenList = []; const length = React.Children.count(children); React.Children.forEach( children, (child,ii) => { childrenList.push(child); if (ii !== length -1) { childrenList.push( <View key={`separator-${ii}`} style={[styles.separator]} /> ); } } ); return ( <View style={style}> {children} </View> ); };Pero esto arroja un error que dice 'Reaccionar' no encontrado.
Sin embargo, funciona bien con componentes basados en clases. El siguiente es el código que funciona bien.
class ItemsWithSeparator extends React.Component { render () { const {children,style} = this.props; const childrenList = []; const length = React.Children.count(children); React.Children.forEach( children, (child,ii) => { childrenList.push(child); if (ii !== length -1) { childrenList.push( <View key={`separator-${ii}`} style={[styles.separator]} /> ); } } ); return ( <View style={style}> {children} </View> ); } }¿Alguien puede ayudarme a entender esto? ¡¡TIA!!
Actualizar:
Solo estaba probando algo y aparentemente hice que el suyo funcionara: -
const ItemsWithSeparator = function ({children,style,...props}) { const childrenList = []; const length = React.Children.count(children); React.Children.forEach( children, (child,ii) => { childrenList.push(child); if (ii !== length -1) { childrenList.push( <View key={`separator-${ii}`} style={[styles.separator]} {...props} /> ); } } ); return ( <View style={style}> {children} </View> ); };Pero todavía estoy un poco confundido sobre cómo funciona esto. Si alguien pudiera explicarme sería realmente genial.
Aquí hay una versión refactorizada para que no tengas que hacer estas cosas extrañas de React.Children: D. Ten en cuenta que puedes devolver una matriz al mapear niños. Allí puede hacer declaraciones si es necesario.
const ItemsWithSeparator = ({children, style, ...props}) => { const finalFields = children.map((child, index) => { return [ child, index !== children.length - 1 && ( <View key={index} {...props} style={styles.separator} /> ) ]; }); return ( <View style={style}> {finalFields} </View> ); };