好吧,有没有办法从函数中返回值-返回的方式是-但不能停止函数-返回的方式呢?
我需要这个,所以我可以经常返回值。
我的代码如下:
loopingTitleTextHandler = () => {
const title = ["good", "cool", "887H", "Vertical"];
for (i = 0; i < 999999; i++) {
var j = i%4;
// loopingTitleTextHandler() // calls itself before return terminates execution
return title[j]; //return 0,1,2,3 in a loop with 3 second delay
}
}
我的React组件
<ShowTitle size={230}
title={this.loopingTitleTextHandler()}
color="#FDA7DC" />
编辑:我正在寻找一种解决此问题的方法,例如python答案: Return multiple values over time 但使用ES6。
import time
def myFunction(limit):
for i in range(0,limit):
time.sleep(2)
yield i*i
for x in myFunction(100):
print( x )
答案 0 :(得分:1)
您可以在生命周期挂钩中使用setInterval
。这将每隔一段时间重复调用该函数
loopingTitleTextHandler = () => {
const title = ["good", "cool", "887H", "Vertical"];
for (i = 0; i < 999999; i++) {
var j = i%4;
// loopingTitleTextHandler() // calls itself before return terminates execution
return title[j]; //return 0,1,2,3 in a loop with 3 second delay
}
}
在setInerval
中添加componentWillMount(){}
componentWillMount(){
setInterval(()=>{
this.loopingTitleTextHandler()
}, 3000) // 3000 milli seconds, that is 3 sec
}
答案 1 :(得分:1)
在React的上下文中,我认为通过状态来管理这些值会更有意义。假设您想每3秒返回一次一个新标题,您可以执行以下操作:
这是一个沙箱:https://codesandbox.io/s/elated-rgb-n4j6z
import React from "react";
import ReactDOM from "react-dom";
import ShowTitle from "./ShowTitle";
import "./styles.css";
class App extends React.Component {
state = {
title: ["good", "cool", "887H", "Vertical"],
currentTitle: "good"
};
loopingTitleTextHandler = () => {
const { currentTitle, title } = this.state;
const nextTitleIndex =
title.indexOf(currentTitle) + 1 === title.length
? 0
: title.indexOf(currentTitle) + 1;
this.setState({ currentTitle: title[nextTitleIndex] });
};
render() {
return (
<div className="App">
<ShowTitle
changeTitle={this.loopingTitleTextHandler}
currentTitle={this.state.currentTitle}
/>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
import React from "react";
class ShowTitle extends React.Component {
componentDidMount() {
setInterval(() => {
this.props.changeTitle();
console.log(this.props.currentTitle + " " + new Date().getTime());
}, 3000);
}
render() {
return <div>Title: {this.props.currentTitle}</div>;
}
}
export default ShowTitle;
在父组件(App.js)中,我们跟踪currentTitle
。调用loopingTitleTextHandler()
时,我们用数组中的下一个标题更新state.currentTitle。 currentTitle
被传递到ShowTitle
组件。
在子组件中,我们使用setInterval()
每3秒调用一次loopingTitleTextHandler()
,并显示下一个标题。