相邻的 JSX 元素答案

【问题标题】：Adjacent JSX elements相邻的 JSX 元素
【发布时间】：2019-06-03 16:14:05
【问题描述】：

如果你能帮助我，我会很高兴。我正在制作 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>

【问题讨论】：

标签： reactjs react-native expo

【解决方案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>;

这个问题是您在表达式中渲染了两个处于同一级别的组件。所以你必须在renderRow的return语句中有一个JSX片段或另一个div作为单亲。我相信上面的代码应该可以解决问题

【讨论】：

【解决方案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>
  )}
/>

【讨论】：