javascript - Reactjs:依赖 render() 函数参数进行渲染不起作用

Question

我使用 React 和 Redux，我想避免过度的 store 更新。我的 input 组件从 store 获取其初始值，然后由用户更改，然后当用户按下 submit 按钮时更新 store 。我的想法是使用 argument 运行 render() 方法，并根据 render() argument 将内容传递给组件。根据 console 输出一切正常，但我在 DOM 中没有看到任何预期的变化!

请帮忙，我卡住了。

import React, {Component} from 'react';

export default class Clock extends Component {
  render(flag){
    let x = null;
    if( flag ){
      x = 5;
     console.log("Forced render, x = " + x);
   }else{
     x = 1;
     console.log("Render when mounts, x = " + x);
   }

    return (
     <div onClick = { this.handleClick.bind(this) } > { x } </div>
    )
  }

  handleClick(){
    console.log("Click!")
    this.render( true );
  }
}

控制台输出:

Clock.js:15 Render when mounts, x = 1
Clock.js:24 Click!
Clock.js:12 Forced render, x = 5
Clock.js:24 Click!
Clock.js:12 Forced render, x = 5

我想看

<div> 5 </div>

但我明白了

<div> 1 </div>

没有 DOM 更改...(

Answer 1

使用 hadlClick 更改状态。它会自动重新渲染，然后使用状态来改变内容。

export default class Clock extends Component {
  state = {
      flag: false
  }

  handleClick = () => {
    this.setState( prevState => ({flag: !prevState.flag }) );
  }

  render(){
    return (
     <div onClick = { this.handleClick } > { this.state ? 5 : 1;} </div>
    )
  }

}