Question

在我的应用程序中，我创建了一个计时器组件。这是一个智能组件，因为我想处理组件内部的计数器状态。

这是我的代码

import React, { Component } from "react";

import {
  View,
  Text,
  StyleSheet
} from "react-native";


import { RoundedButton} from "../../mixing/UI"; 


class Timer extends Component {
    constructor(props) {
        super(props);

        this.state = {
            counter: 30
        }

        this.interval = null;
    }

    componentWillUnmount() {
        cleanUp();
    }

    cleanUp = () => {
        clearInterval(this.interval);
    }

    decreaseCounter = () => {
        if (this.state.counter === 0) {
            return this.cleanUp();
        }

        this.setState({counter: this.state.counter - 1});
    }

    startCounter = () => {
        this.interval = setInterval(this.decreaseCounter, 1000);
    }

    render() {
        return (
            <View>
                <RoundedButton  text='Log in' onPress={() => this.startCounter()} />
                    <Text>{this.state.counter}</Text>
                <RoundedButton  text='Log in' onPress={() => this.cleanUp()} />
            </View>
        );
    }


}


// styles
const styles = StyleSheet.create({

});

export default Timer;

现在，我想从父屏幕中调用它。如果我通过柜台作为道具，

现在无法从Timer组件处理计数器状态。我该如何基于父项来处理孩子的状态。

Answer 1

您可以使用react组件生命周期componentDidMount()

componentDidMount(){ this.setState({counter: this.props.counter}); }

在那里您可以使用this.setState({counter: this.state.counter - 1})

如何在React-native中传递道具以匹配child中的state属性

1 个答案: