Estoy tratando de almacenar el elemento jsx react-native dentro de una variable mientras imprimo dentro del método de devolución, pero recibo un error como este: Las cadenas de texto deben representarse dentro de un componente. A continuación se muestra mi código en el que estoy obteniendo error. Cualquier ayuda será apreciada:

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;
1
Hello World 28 oct. 2019 a las 11:57

3 respuestas

La mejor respuesta

Primero, puede hacer que la función devuelva el propio jsx:

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

Luego, los llamas método donde quieras:

 <Button title="Greater" onPress={() => { checkNum(num) }} />
 {this.checkNum(num)}
2
whd.nsr 28 oct. 2019 a las 10:00

Debe incluir su jsxVal en el componente <Text>, por ejemplo:

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

Es porque, inicialmente estás usando jsxVal = '', que se lee como texto. Eso debe estar encerrado en el componente <Text>. Cuando jsxVal obtiene algún valor, en su caso:

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

Entonces se puede representar en el componente <View>.

1
Sham Gir 28 oct. 2019 a las 09:58
 const [message, setMessage] = useState('')
 const checkNum = (num) => {
    if (num < randNum) {
      jsxVal = `Your number ${num} is lower than ${randNum}`;
      console.warn("if")
    ......
     setMessage(jsxVal)

Las cadenas de texto deben representarse dentro de un componente. lo que significa que '' no puede ser un parámetro de Button, en su lugar, debe enviar un valor de cadena simple y guardarlo en el estado del componente

<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>
1
Eran 28 oct. 2019 a las 10:02