Question

有人可以帮助我解决我的问题吗？我希望当this.state.counter达到0时开始。我看不到我的问题在哪里。当我在没有IF-Else运算符的情况下使用五彩纸屑时，它会起作用。谢谢您的时间：）

import React from "react";
    import {
      StyleSheet,
      Button,
      View,

    } from "react-native";

    import Confetti from 'react-native-confetti';


    export default class App extends React.Component {

      state = {
        counter: 2
      };

      componentDidMount() {
        if (this._confettiView) {
          this._confettiView.startConfetti();
        }
      }

      render() {
        return (
          <View style={styles.container}>
            {this.state.counter == 0 ? <Confetti ref={(node) => this._confettiView = node} /> : null}
            <Button
            title="Press"
              onPress={() => this.setState({ counter: this.state.counter - 1 })}>
            </Button>
          </View>
        );
      }
    }
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: "#87CEEB"
      }
    });

Answer 1

您只需要在另一个函数中剪切显示并在displayFunction中添加条件：

render() {
    return(
        <View>
        {this.displayCounter()}
        </View>
    )
}
displayCounter(){
    if(this.state.counter == 0){

        return (
            <View style={styles.container}>
                <Button
                title="Press"
                onPress={() => this.setState({ counter: this.state.counter - 1 })}>
                </Button>
            </View>
        );

    }
}

希望对您有帮助

React-Native。 If-Else运算符不起作用

1 个答案: