Question

如果this.props ===“ 0”，我想做条件，该组件将显示在屏幕上，否则，该组件将隐藏。怎么做？

我尝试使用本机条件，但不起作用

这是我的代码：

{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

查看是否可行。可能是您错过了整数类型作为字符串类型

{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>
                  )}

Answer 2

其在任何条件下均可使用0是字符串OR Number

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

Answer 3

我已经为您在工作样本的代码和框上创建了一个样本。

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

FirstComponent

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 4

您保留将诸如ShowSecondComponent之类的标志从第一个组件传递到第二个组件。

在您的第一个组件代码中

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

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

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

希望有帮助

如何在React Native中使“组件条件”

4 个答案: