React Native - использовать переменную состояния в статической функции

Question

Я новичок в React-Native, у меня проблема с созданием моего приложения. По сути, у меня есть основное приложение, которое делает что-то, одним из которых является установка переменной Date в состоянии с именем: sleepTime. Теперь я создал часы, которые работают отлично, и каждые секунды обновляются. Теперь моя проблема заключается в создании функции в моем основном приложении, которая сравнивает фактическую дату (полученную с часов) с датой, сохраненной ранее. Проблема в том, что я использовал статическую функцию, которая вызывается на каждом тике в классе часов, эта функция (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 может использовать функцию из реквизита,

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

Вы также можете передать параметры, если хотите получить значения из класса Clock в Main.