Question

我使用React和Redux，并且我想避免过多的store更新。我的input组件从store获取其初始值，然后由用户更改，然后在用户按下store时更新submit button。我的想法是使用render()运行argument方法，并根据render() argument将内容传递给组件。根据{{1}}的输出一切正常，但是我看不到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>

没有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>
    )
  }

}

React.js：依赖render（）函数参数的渲染不起作用

1 个答案: