我试图在 return 方法中打印时将 react-native jsx 元素存储在变量中,但我收到这样的错误:文本字符串必须在组件中呈现。下面是我的代码我收到错误。任何帮助将不胜感激:
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;
最佳答案
首先,您可以让函数返回 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>);
}}
然后,你可以在任何地方调用它们的方法:
<Button title="Greater" onPress={() => { checkNum(num) }} />
{this.checkNum(num)}
关于javascript - 将 jsx 组件存储在 react-native 的变量中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58588029/