Question

我在 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

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

Answer 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>
)}

React Native中相邻的JSX - 错误

1 个答案: