web-dev-qa-db-fra.com

"React.Children.only prévu de recevoir une seule erreur React element child" "lors de l'insertion de <Image> et <TouchableHighlight> dans une <Vue>

J'ai la méthode de rendu suivante dans mon code natif React:

render() {
    const {height, width} = Dimensions.get('window');
    return (
      <View style={styles.container}>
        <Image 
          style={{
            height:height,
            width:width,
          }}
          source={require('image!foo')}
          resizeMode='cover' 
        />
        <TouchableHighlight style={styles.button}/>
      </View>
    );
  }

Ça me donne un

React.Children.only s'attend à recevoir un seul élément React

erreur. Si je supprime le composant TouchableHighlight, cela fonctionne correctement. D'autre part, si je supprime le composant Image, il génère toujours cette erreur. Je ne vois pas pourquoi cela donnerait cette erreur, et <View> devrait pouvoir contenir plus d'un composant pour le rendu.
Des idées?

react-native
64
Pedram

Il semble que <TouchableHighlight> doit avoir exactement un enfant. Les docs disent qu'il ne prend en charge qu'un seul enfant et que plusieurs doivent être enveloppés dans un <View>, mais pas qu'il doit avoir au moins (et la plupart) un seul enfant. Je voulais juste avoir un bouton de couleur unie sans texte/image, donc je n'ai pas jugé nécessaire d'ajouter un enfant.

Je vais essayer de mettre à jour la documentation pour l'indiquer.

74
Pedram

L'élément <TouchableHighlight> est la source de l'erreur. L'élément <TouchableHighlight>doit avoir un élément enfant .

Essayez de lancer le code comme ceci:

render() {
    const {height, width} = Dimensions.get('window');
    return (
        <View style={styles.container}>
            <Image 
                style={{
                    height:height,
                    width:width,
                }}
                source={require('image!foo')}
                resizeMode='cover' 
            />
            <TouchableHighlight style={styles.button}>
                <Text> This text is the target to be highlighted </Text>
            </TouchableHighlight>
        </View>
    );
}
26
Christopher Peter

J'ai eu cette même erreur, même lorsque je n'avais qu'un seul enfant sous le TouchableHighlight. Le problème était que j'avais quelques autres commentés mais incorrectement. Assurez-vous de commenter correctement: http://wesbos.com/react-jsx-comments/

3
maxko87

juste après TouchableWithoutFeedback ou <TouchableHighlight> insérez un <View> de cette façon, vous n'obtiendrez pas cette erreur. pourquoi est-ce que @Pedram answer ou d’autres réponses en expliquent assez?.

1
Danish

Oui, vous devez avoir un enfant dans votre <TouchableHighlight>.

Et si vous ne voulez pas polluer votre fichier avec Views, vous pouvez utiliser React Fragments pour obtenir le même résultat.

<TouchableWithoutFeedback>
  <React.Fragment>
   ...
  </React.Fragment>
</TouchableWithoutFeedback>

ou mieux encore, il existe un syntaxe courte pour React Fragments. Donc, le code ci-dessus peut être écrit comme suit:

<TouchableWithoutFeedback>
  <>
   ...
  </>
</TouchableWithoutFeedback>
1
vikrantnegi007

Cela se produit généralement dans TochableHighlight. Quoi qu'il en soit, erreur signifie que vous devez utiliser un seul élément à l'intérieur du composant, quel qu'il soit.

Solution: Vous pouvez utiliser une vue unique à l'intérieur du parent et tout peut être utilisé. à l'intérieur de cette vue. Voir l'image ci-jointe

entrez la description de l'image ici

0
Harsha Koshila