繁体   English   中英

React Native-在静态函数中使用状态变量

[英]React Native - use a state variable in a static function

我是React-Native的新手,我在创建应用程序时遇到问题。 基本上,我有一个做事的主应用程序,其中之一是将Date变量设置为状态:sleepTime。 现在,我创建了一个完美运行的时钟,并且每秒钟都会更新。 我现在的问题是在我的主应用程序中创建一个函数,将实际日期(从时钟中给出)与之前保存的日期进行比较。 问题是我使用了一个静态函数,该函数在时钟类的每个刻度上调用,该函数(compareTime())在主类中,当我调用它时,我得到的是“未定义不是对象” 。 我不知道的是如何将时钟拨打的电话与我之前保存的日期联系起来。

这是静态函数:

static compareTime(){
  const sleepTime = this.state.sleepTime;
      if(new Date().toLocaleString() == sleepTime){
        this.stopTimer();
      }
 }

时钟类别:

class Clock extends React.Component {
          constructor(props) {
            super(props);
            this.state = {
              time: new Date().toLocaleString()
            };
          }
          componentDidMount() {
            this.intervalID = setInterval(
              () => this.tick(),
              1000
            );
          }
          componentWillUnmount() {
            clearInterval(this.intervalID);
          }
          tick() {
            this.setState({
              time: new Date().toLocaleString()
            });
            MainPage.compareTime();
          }

          render() {
            return (
              <Text style={styles.greeting}>
                The time is: {this.state.time}
              </Text>
            );
          }
        }

而主渲染夹层的返回是唯一链接main和clock的东西:

 return (
      <View style={styles.container}>
        <Clock />
        <Text style={styles.greeting}>
            Sleep time: {sleepTime}.
        </Text>
      </View>
 )

您可以使用道具 由于是MainApplication的子组件,因此您可以将函数comparetime()传递给as道具,并且可以从内部调用该函数。

主要渲染器将具有

<Clock compareTime={this.compareTime.bind(this)}/>

Clock类可以使用props中的函数,

tick() {
  this.setState({
    time: new Date().toLocaleString()
  });
  this.props.compareTime();
}

如果要从Clock类获取值到Main,也可以传递参数。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM