Iterieren über Kinder in zustandslosen Komponenten reagieren/reagieren-native

Question

Ich arbeitete an einer reaktions nativen Anwendung und ich erstellte eine gemeinsame Komponente für die Anzeige Liste Elemente.

<View style={styles.container}> 
    <ItemsWithSeparator style={styles.itemsContainer}> 
    <AppRow /> 
    <AppRow /> 
    </ItemsWithSeparator> 
</View> 

Nun, mein ItemListSeparator ist gerade iteriert über die Kinder und macht die Liste, so dass ich dachte, dass ich dies eine stateless Komponente machen würde.

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> 
); 
}; 

Aber dies wirft eine Fehlermeldung auf, die besagt, dass "React" nicht gefunden wurde.

Es funktioniert jedoch gut mit klassenbasierten Komponenten. Im Folgenden ist der Code, der gut funktioniert.

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> 
    ); 
    } 
} 

Kann mir jemand helfen, dies zu verstehen? TIA !!

Update:

Ich war nur wenige etwas versuchen, und anscheinend hat seine Arbeit: -

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> 
); 
}; 

Aber ich bin immer noch ein wenig verwirrt darüber, wie ist das Arbeiten. Wenn jemand erklären könnte, wäre ich wirklich großartig.

Answer 1

Hier ist eine refaktorierte Version, so dass Sie dieses komische React.Children Zeug nicht tun müssen: D Beachten Sie, dass Sie Array zurückgeben können, wenn Sie untergeordnete Elemente zuordnen. Dort können Sie bei Bedarf Aussagen treffen.

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> 
); 
};