在单击时呈现react组件

Question

当我们点击“添加”链接时，我试图呈现需要组件。下面是主要组件的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { Hand } from './hand.js';
import { Need } from './need.js';

class App extends React.Component{
  constructor() {
    super();
    this.processHand = this.processHand.bind(this);
    this.addNeed = this.addNeed.bind(this);
    this.state = {
      inhandMoney : " ",
      renderNeed: false,
    }

  }

  processHand(e){
    e.preventDefault();
    const handMoneyReceived = this.handMoney.value;
    this.setState({
        inhandMoney: handMoneyReceived
    });     
  }

  addNeed(e){
    e.preventDefault();
    this.setState({
        renderNeed:true
    });
  }

  render(){ 

    const passNeed = (    
            <Need/>   
      );

    return(
        <div>
          <div className ="hand">
            <form onSubmit = {this.processHand}>
              <input type="text" ref= {ref => this.handMoney = ref}/>
              <input type="submit"/>
            </form>
            <Hand handMoney = {this.state.inhandMoney}/>
            <Need/>
          </div>
          {this.state.renderNeed ? passNeed : null}
          <a href="#" className="add" onClick = {this.addNeed}>add</a>
        </div>
      )
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

下面是以防万一的需求组件：

import React from 'react';

export class Need extends React.Component{
constructor() {
    super();
    this.processNeed = this.processNeed.bind(this);
    this.state ={
        why: " ",
        howMuch: 0
    }

}

processNeed(e){
    e.preventDefault();
    const why=this.why.value;
    const howMuch=this.howMuch.value;
    this.setState({
        why:why,
        howMuch:howMuch
    });
}

    render(){
        return(
          <div className ="need">
            <form onSubmit = {this.processNeed}>
              <input type="text" ref= {ref => this.why = ref}/>
              <input type="text" ref= {ref => this.howMuch = ref}/>
              <input type="submit"/>
            </form>
            <div>
                <h1>{this.state.why}</h1>
                <h1>{this.state.howMuch}</h1>
            </div>
          </div>            
        )
    }
}

我在第一次单击add链接时实现了我试图实现的目标，即在第一次单击add链接时，need组件没有任何条件地被呈现，当我单击“add”时，need组件再次被呈现，但当我第二次单击“add”链接时，我没有看到任何变化。为什么会这样，我希望在每次单击“Add”链接时呈现Need组件。

Answer 1

下面是你的问题的解决办法。我试着尽可能接近你的代码。

https://jsfiddle.net/birjubaba/t0yusos9/3/

@肖恩给出的解释是正确的。

默认情况下，无论向setState传递什么有效参数，调用setState都将重新生成组件。所以是的，它应该是重新上演。它似乎没有重新呈现，因为第一次单击后总是显示相同的内容，因为每次单击后renderNeed总是为真

React维护一个虚拟DOM，所有的DOM操作都在这个虚拟DOM中完成（在更新实际DOM之前）。添加need组件是一个DOM操作。因此，第一次，当我们单击“add”时，它实际上更新了虚拟DOM以添加新的need。现在react diff算法工作了，它更新了实际的DOM。因此，在UI中显示need组件。DOM如下所示：

div 
 |- div (class=hand)
      |-form
        |-input (type=text) 
        |-input (type=submit)
      |- Hand
      |- Need
 |-Need (added by clicking on add anchor tag)
 |-a (class=add)

下次单击“add”时，this.state.renderneed再次为true，因此，React将尝试在虚拟DOM中添加Need组件（由于下面的代码）。

{this.state.renderNeed ? passNeed : null}
<a href="#" className="add" onClick = {this.addNeed}>add</a>

但是在添加Need之前，React diff算法将运行，它将看到虚拟（和实际）DOM中已经存在一个Need组件，该组件与它试图添加的组件完全相似。React会认为两个DOM都是一样的，UI中没有任何更新。

您对add的要求如下所示：

div 
 |- div (class=hand)
      |-form
        |-input (type=text) 
        |-input (type=submit)
      |- Hand
      |- Need
 |-Need (added by clicking on add anchor tag)
 |-Need (added by clicking on add anchor tag)
 |-Need (added by clicking on add anchor tag)
 |-Need (added by clicking on add anchor tag)
 |-a (class=add)

1. 在谷歌搜索“和解-react”，然后从搜索结果中打开facebook react页面
2. https://calendar.perfplanet.com/2013/diff/