如何在本机反应中制作“组件条件”

Question

如果 this.props === "0"，我想设置条件，组件将显示在屏幕上，否则，组件将隐藏。如何制作？

我尝试使用 react-native 条件但不起作用

这是我的代码：

{data.is_approved === '0' ? (
  <TouchableOpacity
    onPress = {() => this.deleteTrancation(data.id, data.sales_id)}
    style={[styles.icons, common.backgroundWarn]}
  >
    <Icon name="clear" size={18} color={color.colorOff} />
  </TouchableOpacity>
) : (
  <Text style={[common.textValid]}></Text>
)}

我的完整代码：https://pastebin.com/U9p5akdi

我希望当字符串为“0”时，组件会显示，否则，组件会隐藏

Answer 1

我已经为你创建了一个关于代码和工作示例的示例。

https://codesandbox.io/s/react-native-04dfj

第一个组件

import React, { Component, Fragment } from "react";
import SecondComp from "./SecondComp";

class FirstComp extends Component {
  state = {
    renderSecond: true
  };

  render() {
    const { renderSecond } = this.state;
    return (
      <Fragment>
        Change renderSecond state of FirstComp {renderSecond && <SecondComp />}
      </Fragment>
    );
  }
}

export default FirstComp;

第二个组件

import React, { Component } from "react";

class SecondComp extends Component {
  render() {
    return <div>Rendering Second Component</div>;
  }
}

export default SecondComp;

在第一个组件中有一个状态

 state = {
        renderSecond: true
      };
You can change the renderSecond value to false and second component will not render.
Please check the link for working sample and you can even pass this value as prop from the parent component

Answer 2

你应该将一些标志，如 ShowSecondComponent" 从第一个组件传递给第二个组件。

在您的第一个组件代码中

<Fragment>
        Change renderSecond state of FirstComp {renderSecond && <SecondComp ShowSecondComponent ={this.state.renderSecond} />}
 </Fragment

在第二个组件中接收prop，并在第二个组件的render方法中使用if。

class SecondComp extends Component {
  render() {
    if(!this.props.ShowSecondComponent) return null;
     
    return <div>Rendering Second Component</div>;
  }
}

希望对你有帮助

Answer 3

它适用于任何条件 0 是字符串或数字

{ 
data.is_approved == '0' 
?
<TouchableOpacity/>
:
<Text style={[common.textValid]}></Text>
}

Answer 4

看看它是否有效。可能是你错过了整数类型 字符串类型

{data.is_approved === 0 ? (
                  <TouchableOpacity
                      onPress = {() => this.deleteTrancation(data.id, data.sales_id)}
                      style={[styles.icons, common.backgroundWarn]}>
                    <Icon name="clear" size={18} color={color.colorOff} />
                  </TouchableOpacity>
                  ) : (
                    <Text style={[common.textValid]}></Text>
                  )}