2017-07-15 89 views
0

我有兩個組件像app.js和SetInterval.js。調用setinterval.js時會調用該函數。現在我想從app.js中調用timeinterval函數。我將分享以下代碼供您參考。如何從reactJs中的另一個組件調用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); 
    } 
} 

我得靠賒賬功能的每個呼叫的secondsElapsed值。

+0

getInitialState對於基於類的組件不是必需的。渲染方法應該顯示secondElapsed。 – vijayst

+0

感謝您的回覆。 – Eswar

回答

0

不知道你想通過編寫一個組件setInterval做什麼。但是React組件必須具有render函數。

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

它現在會工作。

此外,當您通過從Component類擴展它來創建類時,請不要編寫getInitialState函數。

+0

是的,現在它的工作。非常感謝。一個我在導入中添加了React元素 – Eswar

+0

我正在將oauth與我的項目集成以獲取刷新標記。有沒有最好的例子來獲取刷新令牌。 – Eswar

相關問題