Question

我有两个组件，如app.js和SetInterval.js。调用setinterval.js时将调用该函数。现在我想从app.js调用timeinterval函数。我分享了以下代码供您参考。

//App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import SetInterval from './SetInterval';

export default class App extends Component {

  render() {

    return (
      <div className="App">
        <SetInterval />
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js </code> sadfsdfasdf and save to reload.
        </p>
      </div>
    );
  }
}

Setinterval.js

import React, { Component } from 'react';

export default class SetInterval extends Component {
    constructor() {
    super();

    this.state = {
        secondsElapsed:0
    }; 
    this.tick = this.tick.bind(this);
}
getInitialState(){
    return {secondsElapsed:0};
 }
  tick() {
      let secondsElapsed = parseInt(this.state.secondsElapsed) + 1;
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
    console.log(this.state.secondsElapsed)
    if(this.state.secondsElapsed == 10){
        alert(1)
    }
  }
  componentDidMount() {
    this.interval = setInterval(this.tick, 1000);
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }
}

我必须在每次调用tick函数时获得secondsElapsed值。

Answer 1

通过为setInterval编写组件，不知道您要做什么。但是React Component必须具有render函数。

class SetInterval extends React.Component {
  // your code here
  render() {
    return <div>set interval</div>
  }
}

它现在可以使用了。

此外，在通过从getInitialState类扩展类创建类时，不要编写Component函数。

如何从reactJs中的另一个组件调用timeinterval函数？

1 个答案: