对无状态组件中的子级进行迭代react/rect native

Question

我正在开发一个react本机应用程序，并为显示列表项创建了一个通用组件。

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

现在，我的ItemListSeparator只是在子级上迭代并呈现列表，所以我想我会把它变成一个无状态组件。

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

但这会抛出一个错误，称未找到"React"。

但是，它可以很好地处理基于类的组件。以下是运行良好的代码。

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

有人能帮我理解吗？TIA！！

更新：

我只是尝试了一些东西，显然让他工作了：-

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

但我仍然有点困惑这是怎么回事。如果有人能解释，我真的会很棒。

Answer 1

这里是重构的版本，所以你不必做这个奇怪的React.Childrens的东西：D注意，在映射子对象时可以返回数组。如果需要，您可以在那里进行if语句。

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