在无状态组件中遍历子代反应/反应本机

Question

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

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

但这会引发错误，提示未找到“反应”。

但是，它可以与基于类的组件一起很好地工作。以下是运行良好的代码。

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.Children东西：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>
  );
};