子属性值未在 Window 上更新，但我可以在控制台中看到它已更新

Question

我不知道我在这段代码中做错了什么，prop 值 'number' 没有在前端更新，尽管在控制台日志中它的值确实增加了。

  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

您必须将 this.number 存储在组件 state 中，只有当其 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

子属性值未在 Window 上更新，但我可以在控制台中看到它已更新

Child prop value not updated on Window , but i can see it get updated in console

reactjs

react-redux