Javascript React本机useState和return语句不一起工作

在这里，每当我点击图标，它不会显示任何内容。它应该显示一些文本，当再次单击时，它应该隐藏文本。我用的是react native

import React, { useState } from 'react';
import { View, Text, StyleSheet, Button, Image, TouchableOpacity} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';

export default function Edit(props, { navigation }) {
  const [slide, setSlide] = useState(false);
  const toggle = () => {
    setSlide(!slide);
    console.log('clicked');
    return (
      <View>
        <Text>random</Text>
        <Text>random</Text>
      </View>
    );
  }
return (
  <View>
    <FontAwesome name="sliders" size={30} color="#000" onPress={() => toggle()}/>
  </View>
}

import React，{useState}来自“React”；
从“react native”导入{视图、文本、样式表、按钮、图像、TouchableOpacity}；
从“反应本机矢量图标/FontAwesome”导入FontAwesome；
导出默认函数编辑（props，{navigation}）{
const[slide，setSlide]=使用状态（false）；
常量切换=（）=>{
固定滑块（！滑块）；
console.log（'clicked'）；
返回(
随机的
随机的
);
}
返回(
切换（）}/>
}

---

测试后，它显示的唯一内容是console.log（'clicked'）消息。它不显示任何其他内容。图标也正常显示。除了标签和标签中的内容外，所有内容都正常工作。

您实际上需要显示视图层次结构（例如从组件返回的内容），而不是从

切换功能返回
视图

我在示例中使用了一个三元表达式进行了演示——如果
slide
为
true
，则会显示，否则不会显示

export default function Edit(props, { navigation }) {
  const [slide, setSlide] = useState(false);
  const toggle = () => {
    setSlide(!slide);
    console.log('clicked');
  }
return (
  <View>
    <FontAwesome name="sliders" size={30} color="#000" onPress={() => toggle()}/>
    {slide ? <View>
        <Text>random</Text>
        <Text>random</Text>
      </View> : null}
  </View>
  );
}

导出默认函数编辑（道具，{navigation}）{
const[slide，setSlide]=使用状态（false）；
常量切换=（）=>{
固定滑块（！滑块）；
console.log（'clicked'）；
}
返回(
切换（）}/>
{幻灯片？
随机的
随机的
：null}
);
}

例如：
您实际上需要显示视图层次结构（例如从组件返回的内容），而不是从
切换功能返回
视图

我在示例中使用了一个三元表达式进行了演示——如果
slide
为
true
，则会显示，否则不会显示

export default function Edit(props, { navigation }) {
  const [slide, setSlide] = useState(false);
  const toggle = () => {
    setSlide(!slide);
    console.log('clicked');
  }
return (
  <View>
    <FontAwesome name="sliders" size={30} color="#000" onPress={() => toggle()}/>
    {slide ? <View>
        <Text>random</Text>
        <Text>random</Text>
      </View> : null}
  </View>
  );
}

导出默认函数编辑（道具，{navigation}）{
const[slide，setSlide]=使用状态（false）；
常量切换=（）=>{
固定滑块（！滑块）；
console.log（'clicked'）；
}
返回(
切换（）}/>
{幻灯片？
随机的
随机的
：null}
);
}

零食示例：
您缺少一个结束语
）
在
之后，我在写问题时忘了输入。在《真实代码》中，我检查并在那里看到了它，但不管怎样，谢谢您在我写问题时忘记输入的
之后错过了一个结束语
）
。在真实的代码中，我检查并在那里看到了它，但无论如何还是要感谢