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

【问题标题】：React Native - use a state variable in a static functionReact Native - 在静态函数中使用状态变量
【发布时间】：2018-04-25 01:17:43
【问题描述】：

我是 React-Native 的新手，我在创建我的应用程序时遇到了问题。基本上，我有一个做事的主要应用程序，其中之一是在状态中设置一个日期变量，称为：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>
            );
          }
        }

主渲染的返回是唯一连接主渲染和时钟的东西：

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

【问题讨论】：

标签： javascript reactjs react-native static state

【解决方案1】：

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

中调用此函数

主渲染应该有，

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

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

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

如果你想从时钟类获取值到Main，你也可以传递参数。

【讨论】：

谢谢，完美运行！我想这样做，但我写错了。