React Native 中的相邻 JSX - 错误

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调用的结果一次只能return一个元素。因为 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 - 错误

Adjacent JSX in React Native - error

jsx

react-native