React Native中相邻的JSX - 错误-Java 学习之路

我在我的 React Native 代码中有这个，我试图解析一些API数据 .

{this.state.articles.map(article => (
     <Image
      style={{width: 50, height: 50}}
      source={{uri: article.urlToImage}}
    />

<Text style={styles.article}  onPress={() => Linking.openURL(article.url)} >{article.title}</Text>

每次我运行它时都会收到错误消息：

Adjacent JSX elements must be wrapped in an enclosing tag

我不知道该怎么做，任何人都可以帮助我吗？谢谢！

1 回答

.map 调用的结果一次只能返回一个元素 . 因为JSX编译器看到两个相邻的元素（ Image 和 Text ），它会引发上述错误 .

解决方案是将两个组件包装在视图中

{this.state.articles.map(article => (
  <View style={{ some extra style might be needed here}}>
     <Image
      style={{width: 50, height: 50}}
      source={{uri: article.urlToImage}}
    />
    <Text style={styles.article}  onPress={() => Linking.openURL(article.url)} >{article.title}</Text>
  </View>
)}

回复于 2024-04-18T09:36:25+08:00

React Native中相邻的JSX - 错误

1 回答

相关问题