我无法理解如何基于函数内部的逻辑来更新渲染函数内部的内容。为此,是否必须返回一个全新的渲染函数?如果是这样,那似乎与React的state和props框架以及诸如此类的直觉相反。
这是我尝试过的:
tick() {
this.setState(prevState => ({
minutes: prevState.seconds + 1,
}));
if(this.state.minutes > this.state.targetGoal){
console.log("NONONONONO");
return (<div>SOMETHING NEW</div>); //update content inside render()
}
}
async componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div style={divStyle}>
<div>Your Second Count: {this.state.seconds}</div>
<habitlab-logo-v2></habitlab-logo-v2>
<br/>
<close-tab-button></close-tab-button>
</div>
);
}
}
答案 0 :(得分:1)
有几个问题。
与@Jayce444 has pointed out一样,您需要更改状态以触发render
重新渲染。
因此,创建一个新标志(例如isOvertime
)以触发渲染。
tick() {
this.setState(
prevState => ({
seconds: prevState.seconds + 1
}),
() => {
if (this.state.seconds > this.state.targetGoal) {
console.log("NONONONONO");
// return <div>SOMETHING NEW</div>; //update content inside render()
this.setState({ isOvertime: true });
}
}
);
}
然后在render
中,显示一个取决于isOvertime
的组件。
render() {
const { isOvertime, seconds } = this.state;
return (
<div>
{isOvertime ? (
<div>Time Over Man!</div>
) : (
<div>Your Second Count: {seconds}</div>
)}
<input
type="number"
value={this.state.targetGoal}
onChange={e => this.setState({ targetGoal: e.target.value })}
/>
</div>
);
}
这里是完整源代码。 (可在CodeSandBox上获得演示)。
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends React.Component {
state = {
interval: 0,
seconds: 0,
targetGoal: 4,
isOvertime: false
};
tick() {
this.setState(
prevState => ({
seconds: prevState.seconds + 1
}),
() => {
if (this.state.seconds > this.state.targetGoal) {
console.log("NONONONONO");
// return <div>SOMETHING NEW</div>; //update content inside render()
this.setState({ isOvertime: true });
}
}
);
}
componentDidMount() {
const interval = setInterval(() => this.tick(), 1000);
this.setState({ interval });
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
const { isOvertime, seconds } = this.state;
return (
<div>
{isOvertime ? (
<div>Time Over Man!</div>
) : (
<div>Your Second Count: {seconds}</div>
)}
<input
type="number"
value={this.state.targetGoal}
onChange={e => this.setState({ targetGoal: e.target.value })}
/>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);