Question

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

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

迭代无状态组件中的孩子会反应/反应原生

1 个答案: