1
votes

Stocker le composant jsx dans des variables en react-native

J'essaie de stocker un élément jsx natif de réaction dans une variable lors de l'impression à l'intérieur de la méthode de retour, mais j'obtiens une erreur comme celle-ci: Les chaînes de texte doivent être rendues dans un composant. Voici mon code dans ce que je reçois une erreur. Toute aide sera appréciée:

import { Text, View, Button } from 'react-native';
import React, { useState } from 'react';

const GameScreen = (props) => {

  const [num, setNum] = useState(0);
  const [randNum, setRandNum] = useState(0);
  const [currentNum, setCurrentNum] = useState('')
  // const [jsxVal, setJsxVal] = useState('')
  let jsxVal = '';

  const setRandomNum = (num, min, max) => {
    const randNum = Math.floor(Math.random() * (max - min)) + min
    setNum(num);
    setRandNum(randNum);
    console.warn("Number is:" + num + " and random number:" + randNum);
  }

  const checkNum = (num) => {
    if (num < randNum) {
      jsxVal = <Text>Your number {num} is lower than {randNum}</Text>;
      console.warn("if")
    } else if (num === randNum) {
      jsxVal = <Text>Your number {num} is greater than {randNum}</Text>;
      console.warn("else if")
    } else {
      jsxVal = <Text>Your number {num} is greater than {randNum}</Text>;
      console.warn("else")
    }
    console.warn("checkNum")
  }

  return (
    <View>
      {
        num === 0 ? setRandomNum(props.navigation.getParam('number'), 1, 100) : null
      }
      <Text>Value is :{num}</Text>
      <View style={{
        justifyContent: 'space-around',
        paddingHorizontal: 8,
        paddingVertical: 8,
        flexDirection: 'row'
      }}>
        <Button title="Lower" onPress={() => { checkNum(num) }} />
        <Button title="Greater" onPress={() => { checkNum(num) }} />
        {
          jsxVal === '' ? null : jsxVal 
        }
      </View>
    </View>
  );
}

export default GameScreen;

javascript react-native jsx

5 commentaires

Essayez d'initialiser la variable jsxVal avec la syntaxe jsx (ou null) et non une chaîne vide.

Pourquoi stocker chez variable? vous pouvez faire le jsx comme retour de la fonction checkNum, puis appeler la fonction elle-même

@HelloWorld, je crois que le problème venait de {jsxVal === ''? jsxVal: null} , cela renvoie une chaîne vide lorsque le composant est rendu pour la première fois, et donc l'erreur. Mais vous avez déjà modifié la question sous la forme appropriée. Cela a-t-il fonctionné?

@VigneshVPai mais null ne devrait pas poser de problème!

@HelloWorld J'ai ajouté une réponse à cela.

3 Réponses :

1
votes

<View>
      {
        num === 0 ? setRandomNum(props.navigation.getParam('number'), 1, 100) : null
      }
      <Text>Value is :{num}</Text>
      <View style={{
        justifyContent: 'space-around',
        paddingHorizontal: 8,
        paddingVertical: 8,
        flexDirection: 'row'
      }}>
        <Button title="Lower" onPress={() => { checkNum(num) }} />
        <Button title="Greater" onPress={() => { checkNum(num) }} />
        {
          jsxVal === '' ? null : jsxVal 
        }
        <Text>{message}</Text>
      </View>
    </View>

0 commentaires

1
votes

Vous devez inclure votre jsxVal dans le composant par exemple:

jsxVal = <Text>Your number {num} is greater than {randNum}</Text>

C'est parce que, au départ, vous utilisez jsxVal = '' , qui se lit sous forme de texte. Cela doit être inclus dans le composant . Lorsque jsxVal obtient une valeur, dans votre cas:

{
 jsxVal === '' ? null : <Text>{jsxVal}</Text> 
}

alors il peut être rendu dans le composant .

3 commentaires

Pourquoi avez-vous utilisé à l'intérieur de la variable?

jsxVal = Votre numéro {num} est supérieur à {randNum} Cela ne fonctionne pas lorsque je le mets dans

cela fonctionnera si vous utilisez: {jsxVal === ''? null: {jsxVal} } . Veuillez lire la solution complète, vous comprendrez pourquoi cette erreur se produit.

2
votes

Tout d'abord, vous pouvez faire en sorte que la fonction renvoie le jsx lui-même:

 <Button title="Greater" onPress={() => { checkNum(num) }} />
 {this.checkNum(num)}

Ensuite, vous les appelez méthode où vous voulez:

 checkNum = (num) => {
   if (num < randNum) {
      return(<Text>Your number {num} is lower than {randNum}</Text>);
   } else if (num === randNum) {
     return(<Text>Your number {num} is greater than {randNum}</Text>);
   } else {
     return(<Text>Your number {num} is greater than {randNum}</Text>);
}}

1 commentaires

Oui, c'est la bonne réponse et la bonne méthode.