Как использовать условный setState и передать это значение другому компоненту в React Native?

Question

Я сейчас работаю с React Native и хочу определить условия внутри setState. После этой операции я хочу передать это значение другому классу и изменить текст внутри этого класса.

Во-первых, я хочу определить и изменить значение isLightOn между true и false, когда я нажимаю кнопку.

Вот мои коды:

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 внутри другого класса. В соответствии с этим значением некоторые текстовые изменения будут выключены или включены или выключены.

Вот мой второй класс:

class LightBulb extends Component {
    render() {
        return (

            <View style={styles.green} >

                <Text> OFF </Text>

            </View>

        );
    }
}

Как изменить данные с помощью setState () и передать данные другому классу?

Answer 1

Для вашего значения состояния isLightOn используйте следующее выражение при нажатии кнопки: this.setState({isLightOn: !this.state.isLightOn})

Затем вам нужно передать состояние вашему компоненту LightBulb.

В конце вы должны условно визуализировать ваш компонент:

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>

        );
    }
}