当道具更改时，ReactJS子组件不更新

我是ReactJS新手，正在做一些练习，这是我的代码。当我单击“显示进度”按钮时，我希望

进度

会被

设置间隔

触发，并显示最新时间，但它不是这样工作的。它只显示值 第一次通过并保持不变

class App extends React.Component{
    constructor(props){
        super(props);
        this.showProgress = this.showProgress.bind(this);

        this.state = {
            now: new Date(),
            content: null
        };
        this.timerId = null;
    }

    showProgress(){
        let content = <Progress now={ this.state.now } />;
        this.setState({ content: content });
    }

    componentDidMount(){
        this.timerId = setInterval(()=>this.setState({now: new Date()}), 500);
    }

    componentWillUnmount(){
        clearInterval(this.timerId);
    }

    render(){
        return (
            <div>
                <button onClick={ this.showProgress }>Show Progress</button>
                { this.state.content }
            </div>
        )
    }
}

function Progress(props){
    return (
        <h2>{ props.now.toString() }</h2>
    );
}

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.showProgress=this.showProgress.bind（this）；
此.state={
现在：新日期（），
内容：空
};
this.timerId=null；
}
showProgress（）{
让内容=；
this.setState（{content:content}）；
}
componentDidMount（）{
this.timerId=setInterval（（）=>this.setState（{now:new Date（）}），500）；
}
组件将卸载（）{
clearInterval（this.timerId）；
}
render（）{
返回(
显示进步
{this.state.content}
)
}
}
功能进展（道具）{
返回(
{props.now.toString（）}
);
}
ReactDOM.render(
,
document.getElementById（'root'））
);

相反，如果将

嵌入

应用程序的
渲染逻辑中，则时间将通过
设置间隔
刷新

我想知道它怎么了？
您正在以状态存储一个组件。我甚至不能100%确定这是否有效

你不能做如下的事情吗

class App extends React.Component{
    constructor(props){
        super(props);
        this.showProgress = this.showProgress.bind(this);

        this.state = {
            now: new Date(),
            content: null,
            showProgress: false,
        };
        this.timerId = null;
    }

    showProgress(){
        this.setState({ showProgress: true });
    }

    componentDidMount(){
        this.timerId = setInterval(()=>this.setState({now: new Date()}), 500);
    }

    componentWillUnmount(){
        clearInterval(this.timerId);
    }

    render(){
        return (
            <div>
                <button onClick={ this.showProgress }>Show Progress</button>
                {this.state.showProgress && <Progress now={ this.state.now } />}
            </div>
        )
    }
}

function Progress(props){
    return (
        <h2>{ props.now.toString() }</h2>
    );
}

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.showProgress=this.showProgress.bind（this）；
此.state={
现在：新日期（），
内容：空，
showProgress:false，
};
this.timerId=null；
}
showProgress（）{
this.setState（{showProgress:true}）；
}
componentDidMount（）{
this.timerId=setInterval（（）=>this.setState（{now:new Date（）}），500）；
}
组件将卸载（）{
clearInterval（this.timerId）；
}
render（）{
返回(
显示进步
{this.state.showProgress&&}
)
}
}
功能进展（道具）{
返回(
{props.now.toString（）}
);
}
ReactDOM.render(
,
document.getElementById（'root'））
);