Question

如果您能帮助我，我将非常高兴。我正在制作React Native Expo应用程序。我有显示数据库信息的代码。当我插入代码以添加图像时，出现错误，为什么？

错误：相邻的JSX元素必须包装在一个封闭标签中。您是否想要JSX片段<> ...？（79:12）

  <View>



        <ListView

          dataSource={this.state.dataSource}

          renderSeparator= {this.ListViewItemSeparator}

          renderRow={(rowData) =>


            <Image
         source={require('../assets/rose-blue-flower-rose-blooms-67636.jpeg')}
       />

            <Text
                      onPress={() => {
                        /* 1. Navigate to the Details route with params */
                        this.props.navigation.navigate('Details', {
                          otherParam: rowData.article_title,
                        });
                      }}
                    >{rowData.article_title}</Text>

      }



        />

      </View>

Answer 1

<View>
  <ListView
    dataSource={this.state.dataSource}
    renderSeparator={this.ListViewItemSeparator}
    renderRow={rowData => (
      <>
        <Image
          source={require("../assets/rose-blue-flower-rose-blooms-67636.jpeg")}
        />
        <Text
          onPress={() => {
            /* 1. Navigate to the Details route with params */
            this.props.navigation.navigate("Details", {
              otherParam: rowData.article_title,
            });
          }}
        >
          {rowData.article_title}
        </Text>
      </>
    )}
  />
</View>;

此问题是您要在表达式中呈现处于同一级别的两个组件。因此您在return的{{1}}语句中必须有一个JSX片段或另一个div作为单亲。.我相信上面的代码应该可以解决问题

Answer 2

您只需要用Fragment元素包装这些元素。 ListView之所以需要一个元素才能处理“行”。您可以使用片段进行模拟：）

<React.Fragment>
  <Image />
  <Text />
</React.Fragment>

为片段提供一些不错的语法（如果您的编译器支持的话）

<>
</>

将其应用于您的代码

<ListView
  dataSource={this.state.dataSource}
  renderSeparator={this.ListViewItemSeparator}
  renderRow={rowData => (
    <React.Fragment>
      <Image
        source={require("../assets/rose-blue-flower-rose-blooms-67636.jpeg")}
      />
      <Text
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          this.props.navigation.navigate("Details", {
            otherParam: rowData.article_title,
          });
        }}
      >
        {rowData.article_title}
      </Text>
    </ React.Fragment>
  )}
/>

相邻的JSX元素

2 个答案: