Windowで子小道具の値は更新されていませんが、コンソールで更新されていることがわかります

Question

私はこのコードで間違っているとわかりません、プロンプトの値はフロントエンドでは更新されませんそれは価値が増加する。

import React from 'react'; 
    import { render } from 'react-dom'; 


    class Parent extends React.Component{ 
     constructor(props){ 
      super(props); 
      this.number=0; 
      this.changeValue=this.changeValue.bind(this); 
     } 

     changeValue(){ 
      console.log('-------------this.number',this.number); 
      this.number=this.number+1; 
     } 

     render(){ 
      return(
       <div> 
        <Child callMe={this.changeValue} increaseNo={this.number}></Child> 
       </div> 
      ) 
     } 
    } 


    class Child extends React.Component{ 

     render(){ 
      return(
       <div> 
        <button onClick={this.props.callMe}>CLick Me</button> 
        <h1>{this.props.increaseNo}</h1> 
       </div> 
      ) 
     } 
    } 

    render(<Parent/> , document.getElementById('root')); 

Answer 1

あなたはコンポーネントstate内this.numberを格納する必要があり、構成要素は、そのstate変更された場合のみ再レンダリングされるか、新しいpropsを受け取ります。

class Parent extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state = { 
      number: 0 
     } 
     this.changeValue=this.changeValue.bind(this); 
    } 

    changeValue(){ 
     this.setState({number: this.state.number + 1}); 
    } 

    render(){ 
     return(
      <div> 
       <Child callMe={this.changeValue} increaseNo={this.state.number}></Child> 
      </div> 
     ) 
    } 
} 


class Child extends React.Component{ 

    render(){ 
     return(
      <div> 
       <button onClick={this.props.callMe}>CLick Me</button> 
       <h1>{this.props.increaseNo}</h1> 
      </div> 
     ) 
    } 
} 

jsfiddle