如何使用條件 setState 並將該值賦予 React Native 中的另一個組件？

Question

我現在正在使用 React Native，我想確定 setState 內部的條件。 在該操作之后，我想將該值賦予另一個 class 並更改該 class 內部的文本。

首先，當我按下按鈕時，我想確定並在 true 和 false 之間更改 isLightOn 值。

這是我的代碼：

class LightButton extends  Component {

    state = {
        isLightOn: false
    }

    render() {
        return(
            <View style={styles.red} >

                <LightBulb> </LightBulb>
          <Button
           title="Turn light on"
           onPress={() => { this.setState({isLightOn:true}) }}
          />
            </View>

        );
    }
} 

之后，我想在另一個 class 中使用 isLightOn 值。 根據該值，一些文本將變為 on 或 on 到 off。

這是我的第二個 class：

class LightBulb extends Component {
    render() {
        return (

            <View style={styles.green} >

                <Text> OFF </Text>

            </View>

        );
    }
}

如何使用 setState() 更改數據並將數據傳遞給另一個 class？

Answer 1

對於您的 isLightOn state 值，按下按鈕時使用以下表達式： this.setState({isLightOn: .this.state.isLightOn})

然后您需要將 state 傳遞給您的燈泡組件。

最后，您應該有條件地渲染您的組件：

class LightButton extends  Component {

    state = {
        isLightOn: false
    }

    render() {
        return(
            <View style={styles.red} >

                <LightBulb isLightOn={this.state.isLightOn}> </LightBulb>
          <Button
           title="Turn light on"
           onPress={() => { this.setState({isLightOn: !isLightOn}) }}
          />
            </View>

        );
    }
} 

class LightBulb extends Component {
    render() {
        return (

            <View style={this.props.isLightOn ? styles.green : styles.red} >

                {this.props.isLightOn 
                  ?
                    <Text> OFF </Text>
                  :
                    <Text> ON </Text>
                }

            </View>

        );
    }
}