Saya mencoba menyimpan elemen jsx asli-reaksi di dalam variabel saat mencetak di dalam metode pengembalian tetapi saya mendapatkan kesalahan seperti ini: String teks harus dirender dalam komponen. Di bawah ini adalah kode tempat saya berada mendapatkan kesalahan. Bantuan apa pun akan dihargai:

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 Oktober 2019, 11:57

3 jawaban

Jawaban Terbaik

Pertama, Anda dapat membuat fungsi mengembalikan jsx itu sendiri:

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

Kemudian, Anda memanggil mereka metode di mana pun Anda inginkan:

 <Button title="Greater" onPress={() => { checkNum(num) }} />
 {this.checkNum(num)}
2
whd.nsr 28 Oktober 2019, 10:00
 const [message, setMessage] = useState('')
 const checkNum = (num) => {
    if (num < randNum) {
      jsxVal = `Your number ${num} is lower than ${randNum}`;
      console.warn("if")
    ......
     setMessage(jsxVal)

String teks harus dirender dalam komponen. artinya '< Text >' tidak dapat menjadi parameter Button , sebaliknya Anda harus mengirim nilai string sederhana dan menyimpannya dalam status komponen

<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 Oktober 2019, 10:02

Anda harus menyertakan jsxVal Anda ke dalam komponen <Text> mis:

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

Itu karena, awalnya Anda menggunakan jsxVal = '', yang dibaca sebagai teks. Itu harus disertakan dalam komponen <Text>. Ketika jsxVal mendapatkan beberapa nilai, dalam kasus Anda :

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

Kemudian dapat dirender dalam komponen <View>.

1
Sham Gir 28 Oktober 2019, 09:58