Reactjs 更改进度道具后，强制进度条组件重新渲染

传入的道具更改后，如何强制组件重新渲染？

前提：在我的主页上，我有一个进度条。从该基本页面，用户可以访问多个模式页面。进度条应显示用户查看了多少模态

原则上，大部分都是有效的。唯一的问题是，当传入的

progress

道具更改时，我的进度条组件不会重新呈现我的可视进度条

<ProgressBar 
    progress={ this.props.progress } 
/>

}

---

任何指导都将不胜感激

仅当状态已更改时才能触发重新渲染。状态可以从道具更改或直接设置状态更改更改。组件获取更新的状态，并决定是否应重新呈现组件

所以，若要更改组件在渲染时产生效果的任何位置，那个么您将传递一个状态 类进程扩展了React.Component{

componentDidMount() {
    setInterval(() => {
        this.setState(() => {

            progress:true
        });
    }, 1000);
}

render() {

    return (<div>{this.state.progress ? <div> true </div>: <div>false</div>}</div>);
}

componentDidMount（）{
设置间隔（（）=>{
此.setState（（）=>{
进展：正确
});
}, 1000);
}
render（）{
返回（{this.state.progress？true:false}）；
}

---

}

当传递的道具更改时，在render方法之前调用

getDerivedStateFromProps（）

。在这里，您可以将当前状态与新数据进行比较，并返回一个对象或null以不更新任何内容

static getDerivedStateFromProps(props, state)

但是，它不会以反映更改的道具的方式重新渲染视觉进度条（一系列具有样式的视图组件）。文本字段更改，视图不更改

这证明该组件可以很好地重新加载。不需要寻找一颗神奇的子弹，另一种力量重播的方式道具更换时组件重新启动。

render() {
    // a number of views that create a visual progress bar
    // entirely dependent on calculated values, i.e. not directly
    // referencing this.props.progress
}

---

我们需要更多的数据/代码-这是问题的根源。子组件的构造可能导致“停止重新渲染进程沿树向下传播”如果任何直接子对象没有重新渲染，则较深的子对象将不会重新渲染。

不要将传入的属性保存在状态中。如果它正在更新文本字段，则它正在重新渲染，听起来问题似乎出在您对条本身的实现中。。。你能把这个加到你的问题上吗？@JuniusL。我没有将传入的道具保存在状态中。请尝试添加

getDerivedStateFromProps（）

当传入的道具更改时会调用此属性。我已添加

componentWillReceiveProps（nextProps）

并在其中重复进度条的所有计算，但使用

nextProps

值。到目前为止，这似乎起到了作用。该方法的问题是，在它内部，我不能使用

this调用我的常规函数。

，可以吗？你可以

getDerivedStateFromProps=（props，state）=>{}

调用你的函数，如果你不想更新状态，就返回null。我的意思是因为它是

静态的？
render() {
    // a number of views that create a visual progress bar
    // entirely dependent on calculated values, i.e. not directly
    // referencing this.props.progress
}