懒惰的悬念在React Native中不起作用

Question

考虑此组件

import React, {lazy, Suspense} from "react"
import {View, StyleSheet, Text, ScrollView} from "react-native"

const Sections = lazy(() => import('./story/Sections'))

export default StoryScreen = (props) => (

  <Suspense fallback={<Text>Loading...</Text>}>
    <View style={styles.container}>
      <ScrollView style={styles.sectionContainer}>
        <Sections sections={props.item.sections}/>
      </ScrollView>
    </View>
  </Suspense>
)

使用 Sections.js 作为

import React from "react"
import Section from "./Section"

export default Sections = (props) => (
  props.sections.map((section) => (
    <Section key={section.id_section} {...section}/>
  ))
)

导航到组件时收到的错误是：

我不知道我在哪里做错了。有任何线索吗？

Answer 1

问题出在您的 Sections 组件中。您正在返回一个 JSX 元素数组，它本身不是组件可以返回的有效 JSX 元素。为此，您必须使用另一个 JSX 标记包装您创建的 Sections 数组，最简单的是 Fragment。这将是有效的 JSX，并将正确呈现。

import React from "react"
import Section from "./Section"

export default Sections = (props) => (
  <>
    {props.sections.map((section) => (
      <Section key={section.id_section} {...section}/>
    ))}
  </>
)