Question

我无法理解如何基于函数内部的逻辑来更新渲染函数内部的内容。为此，是否必须返回一个全新的渲染函数？如果是这样，那似乎与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>

    );
  }
}

Answer 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);

使用React根据逻辑在div中更改内容

1 个答案: