React JS 交通灯模拟器中的模式错误
Pattern error in React JS traffic light simulator
我正在尝试使用 ReactJS 构建一个交通灯。我需要红绿灯按红色、黄色、绿色、红色、黄色、绿色等顺序运行。我当前的代码给了我一个不同的模式。我不太清楚如何在这个上使用 setInterval,我真的需要一些帮助。我在 CodePen 上查看了 CarterTsai 对同一问题的解决方案,但我既无法理解他的大部分代码,也无法将其转换为 stackblitz 友好格式以使其适应我的代码。有人有答案吗?任何帮助表示赞赏!如果任何人都可以提供包含两个组件的解决方案,那也很棒 - 一个改变交通灯状态,另一个利用该状态显示实际交通灯(这是我作业的要求)。
这里是 link 查看我在 stackblitz 上的项目:https://stackblitz.com/edit/react-eqkhd7?file=src/style.css
我的代码在 App.js 中:
import React from 'react';
import './style.css';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
color1: '',
color2: '',
color3: ''
};
setInterval(this.changeColor1.bind(this), 2000);
setInterval(this.changeColor2.bind(this), 4000);
setInterval(this.changeColor3.bind(this), 6000);
}
changeColor1 = () => {
this.setState({ color1: 'red', color2: '', color3: '' });
};
changeColor2 = () => {
this.setState({ color1: '', color2: 'yellow', color3: '' });
};
changeColor3 = () => {
this.setState({ color1: '', color2: '', color3: 'green' });
};
render() {
return (
<div>
<span style={{ backgroundColor: this.state.color1 }} class="circle" />
<p />
<span style={{ backgroundColor: this.state.color2 }} class="circle" />
<p />
<span style={{ backgroundColor: this.state.color3 }} class="circle" />
</div>
);
}
}
style.css :
h1,
p {
font-family: Lato;
}
.circle {
margin: auto;
height: 100px;
width: 100px;
border: 5px black solid;
border-radius: 50%;
display: block;
}
index.js :
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
你的问题是你设置了 3 个不同的时间间隔,所以所有 3 个状态改变函数都在不同的时间间隔被连续调用。特别是,第一个让它变红的事件每 2 秒发生一次——这将包括您尝试使其变黄时每 4 秒发生一次,以及当您尝试使其变绿时每 6 秒发生一次。这将导致不可预测的结果,因为没有真正的方法知道每次将首先触发哪个函数 - 这可能取决于“随机”因素,或者可能取决于您使用的浏览器。
我假设您的意图是每 2 秒定期更改一次,顺序为红色、黄色、绿色等。为此,创建一个 single 函数来检查当前状态并适当更新 - 并安排每 2 秒更新一次。
这是实现此目标的众多方法之一。保持 render
不变,但将其他方法替换为这些方法:
constructor(props) {
super(props);
this.state = {
color1: 'red',
color2: '',
color3: ''
};
setInterval(this.changeColor, 2000);
}
changeColor1 = () => {
this.setState({ color1: 'red', color2: '', color3: '' });
};
changeColor2 = () => {
this.setState({ color1: '', color2: 'yellow', color3: '' });
};
changeColor3 = () => {
this.setState({ color1: '', color2: '', color3: 'green' });
};
changeColor = () => {
if (this.state.color1) {
this.changeColor2();
} else if (this.state.color2) {
this.changeColor3();
} else {
this.changeColor1();
}
};
(如果有一个状态 属性 来保存当前颜色实际上会更简洁,但这也意味着要重写 render
。我会让你考虑是否会适合你。)
PS:这里实际上不需要 bind
,因为您的方法是使用箭头函数定义为属性的。您可以使用一个或另一个 - bind
或箭头函数 - 但同时使用两者毫无意义。
您可以使用 setTimeout
并在当前红绿灯执行后调用另一个红绿灯函数。
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
color1: '',
color2: '',
color3: ''
};
setTimeout(this.changeColor1, 2000);
}
changeColor1 = () => {
this.setState({ color1: 'red', color2: '', color3: '' });
setTimeout(this.changeColor2, 2000);
};
changeColor2 = () => {
this.setState({ color1: '', color2: 'yellow', color3: '' });
setTimeout(this.changeColor3, 2000);
};
changeColor3 = () => {
this.setState({ color1: '', color2: '', color3: 'green' });
setTimeout(this.changeColor1, 2000);
};
我正在尝试使用 ReactJS 构建一个交通灯。我需要红绿灯按红色、黄色、绿色、红色、黄色、绿色等顺序运行。我当前的代码给了我一个不同的模式。我不太清楚如何在这个上使用 setInterval,我真的需要一些帮助。我在 CodePen 上查看了 CarterTsai 对同一问题的解决方案,但我既无法理解他的大部分代码,也无法将其转换为 stackblitz 友好格式以使其适应我的代码。有人有答案吗?任何帮助表示赞赏!如果任何人都可以提供包含两个组件的解决方案,那也很棒 - 一个改变交通灯状态,另一个利用该状态显示实际交通灯(这是我作业的要求)。
这里是 link 查看我在 stackblitz 上的项目:https://stackblitz.com/edit/react-eqkhd7?file=src/style.css
我的代码在 App.js 中:
import React from 'react';
import './style.css';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
color1: '',
color2: '',
color3: ''
};
setInterval(this.changeColor1.bind(this), 2000);
setInterval(this.changeColor2.bind(this), 4000);
setInterval(this.changeColor3.bind(this), 6000);
}
changeColor1 = () => {
this.setState({ color1: 'red', color2: '', color3: '' });
};
changeColor2 = () => {
this.setState({ color1: '', color2: 'yellow', color3: '' });
};
changeColor3 = () => {
this.setState({ color1: '', color2: '', color3: 'green' });
};
render() {
return (
<div>
<span style={{ backgroundColor: this.state.color1 }} class="circle" />
<p />
<span style={{ backgroundColor: this.state.color2 }} class="circle" />
<p />
<span style={{ backgroundColor: this.state.color3 }} class="circle" />
</div>
);
}
}
style.css :
h1,
p {
font-family: Lato;
}
.circle {
margin: auto;
height: 100px;
width: 100px;
border: 5px black solid;
border-radius: 50%;
display: block;
}
index.js :
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
你的问题是你设置了 3 个不同的时间间隔,所以所有 3 个状态改变函数都在不同的时间间隔被连续调用。特别是,第一个让它变红的事件每 2 秒发生一次——这将包括您尝试使其变黄时每 4 秒发生一次,以及当您尝试使其变绿时每 6 秒发生一次。这将导致不可预测的结果,因为没有真正的方法知道每次将首先触发哪个函数 - 这可能取决于“随机”因素,或者可能取决于您使用的浏览器。
我假设您的意图是每 2 秒定期更改一次,顺序为红色、黄色、绿色等。为此,创建一个 single 函数来检查当前状态并适当更新 - 并安排每 2 秒更新一次。
这是实现此目标的众多方法之一。保持 render
不变,但将其他方法替换为这些方法:
constructor(props) {
super(props);
this.state = {
color1: 'red',
color2: '',
color3: ''
};
setInterval(this.changeColor, 2000);
}
changeColor1 = () => {
this.setState({ color1: 'red', color2: '', color3: '' });
};
changeColor2 = () => {
this.setState({ color1: '', color2: 'yellow', color3: '' });
};
changeColor3 = () => {
this.setState({ color1: '', color2: '', color3: 'green' });
};
changeColor = () => {
if (this.state.color1) {
this.changeColor2();
} else if (this.state.color2) {
this.changeColor3();
} else {
this.changeColor1();
}
};
(如果有一个状态 属性 来保存当前颜色实际上会更简洁,但这也意味着要重写 render
。我会让你考虑是否会适合你。)
PS:这里实际上不需要 bind
,因为您的方法是使用箭头函数定义为属性的。您可以使用一个或另一个 - bind
或箭头函数 - 但同时使用两者毫无意义。
您可以使用 setTimeout
并在当前红绿灯执行后调用另一个红绿灯函数。
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
color1: '',
color2: '',
color3: ''
};
setTimeout(this.changeColor1, 2000);
}
changeColor1 = () => {
this.setState({ color1: 'red', color2: '', color3: '' });
setTimeout(this.changeColor2, 2000);
};
changeColor2 = () => {
this.setState({ color1: '', color2: 'yellow', color3: '' });
setTimeout(this.changeColor3, 2000);
};
changeColor3 = () => {
this.setState({ color1: '', color2: '', color3: 'green' });
setTimeout(this.changeColor1, 2000);
};