Question

  constructor(props: Props) {
    super(props);
    this.state = {
      SwitchInfo:''
    };
  }

      _renderContent = section => {

    const Clicked = () => {
       if(this.state.SwitchInfo == '0'){
           return<View>
            <Text>{section.id}</Text>
            </View>
       }
       else{
         return <View>
          <Text>{section.id}</Text>
          </View>
       }
     }


    return (
      <View style ={ styles.backgroundswitch} >
      <SwitchSelector
          initial={0}
          height = {25}
          onPress={(value) => this.setState({ SwitchInfo: value })} //{Clicked(value)}}
          textColor={theme.COLORS.MUTED} //'#7a44cf'
          selectedColor={theme.COLORS.WHITE}
          buttonColor={theme.COLORS.ERROR}
          borderColor={theme.COLORS.ERROR}
          hasPadding
          options={[
            { label: "Info", value: "0"  },
            { label: "Error Log",value: "1" }
          ]}
        />
      <View>Clicked()</View>
      </View>
    );
  };

我想在按下switch选项卡时使用Switched选择器显示不同的API数据。我能够获取数据并在终端中显示所需的输出（使用console.log（）语句），但是我无法在移动用户界面中返回或显示文本。

获取错误：必须呈现错误文本组件我尝试在单击的函数中添加渲染仍然出现错误。

Answer 1

您必须在JSX <View>{Clicked()}</View>的大括号内添加代码，而不仅仅是将<View>Clicked()</View>添加为文本。

正确的语法：

<SwitchSelector
  initial={0}
  height = {25}
  onPress={(value) => this.setState({ SwitchInfo: value })} //{Clicked(value)}}
  textColor={theme.COLORS.MUTED} //'#7a44cf'
  selectedColor={theme.COLORS.WHITE}
  buttonColor={theme.COLORS.ERROR}
  borderColor={theme.COLORS.ERROR}
  hasPadding
  options={[
    { label: "Info", value: "0"  },
    { label: "Error Log",value: "1" }
  ]}
/>
  <View>{Clicked()}</View>
</SwitchSelector>

必须呈现错误文本组件

1 个答案:

正确的语法：