Question

我是React-Native的新手，我在创建应用时遇到了问题。基本上，我有一个主要的应用程序做事情，其中之一是在状态中设置一个Date变量：sleepTime。现在我已经创建了一个完美运行的时钟，并且每秒都会更新。我现在的问题是在我的主应用程序中创建一个函数，将实际日期（从时钟给出）与之前保存的日期进行比较。问题是我使用了一个静态函数，它在时钟类的每个tick上被调用，这个函数（compareTime（））在主类中，当我调用它时，我得到“undefined不是一个对象” 。我无法弄清楚的是如何将时钟发出的呼叫与我之前保存的日期联系起来。

这是静态功能：

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>
 )

Answer 1

您可以使用道具。由于它是MainApplication的子组件，您可以将函数comparetime（）传递给as props，并且可以从

中调用此函数

主渲染将有，

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

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

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

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

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

1 个答案: