[英]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.