如何使用条件 setState 并将该值赋予 React Native 中的另一个组件？

Question

我现在正在使用 React Native，我想确定 setState 内部的条件。在该操作之后，我想将该值赋予另一个类并更改该类中的文本。

首先，我想确定并在按下 to 按钮时将 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>

        );
    }
} 

之后，我想在另一个类中使用该 isLightOn 值。根据该值，将有一些文本更改为 on 或 on 到 off。

这是我的第二节课：

class LightBulb extends Component {
    render() {
        return (

            <View style={styles.green} >

                <Text> OFF </Text>

            </View>

        );
    }
}

如何使用 setState() 更改数据并将数据传递给另一个类？

Answer 1

对于您的 isLightOn 状态值，请在按下按钮时使用以下表达式： this.setState({isLightOn: !this.state.isLightOn})

然后你需要将状态传递给你的灯泡组件。

最后你应该有条件地渲染你的组件：

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>

        );
    }
}