将 jsx 组件存储在 react-native 中的变量中答案

【问题标题】：Store jsx component inside variables in react-native将 jsx 组件存储在 react-native 中的变量中
【发布时间】：2020-02-23 13:09:16
【问题描述】：

我试图在返回方法中打印时将 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语法（或null）初始化jsxVal变量，而不是空字符串。
为什么存储在变量中？您可以将 jsx 作为 checkNum 函数的返回，然后调用函数本身
@HelloWorld，我相信问题出在{ jsxVal === '' ? jsxVal : null }，当组件第一次渲染时返回空字符串，因此出现错误。但是您已经将问题编辑为正确的形式。成功了吗？
@VigneshVPai 但 null 应该不是问题！
@HelloWorld 我为此添加了答案。

标签： javascript react-native jsx

【解决方案1】：

 const [message, setMessage] = useState('')
 const checkNum = (num) => {
    if (num < randNum) {
      jsxVal = `Your number ${num} is lower than ${randNum}`;
      console.warn("if")
    ......
     setMessage(jsxVal)

文本字符串必须在组件内呈现。这意味着 '' 不能是 Button 的参数，而是应该发送一个简单的字符串值并将其保存在组件状态中

<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>

【讨论】：

【解决方案2】：

首先，你可以让函数返回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)}

【讨论】：

是的，这是正确的答案和正确的方法。

【解决方案3】：

您必须将您的 jsxVal 包含在 <Text> 组件中，例如：

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

这是因为，最初您使用的是jsxVal = ''，它以文本形式读取。这必须包含在<Text> 组件中。当 jsxVal 获得一些价值时，在你的情况下：

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

然后可以在<View>组件中渲染。

【讨论】：

为什么你在变量中使用了？
jsxVal = 你的数字 {num} 大于 {randNum} 当我把它放入时这不起作用
如果您使用：{jsxVal === '' ? null : <Text>{jsxVal}</Text> }，它将起作用。请阅读完整的解决方案，您将了解为什么会出现此错误。