Javascript 当道具更改时渲染反应组件

如何在道具更改时强制渲染组件？ 如何在子组件的道具更改时强制渲染父组件

我搜索了很多，但在新版本中所有的解决方案都不推荐使用

在我的任意页面（Route-exact-path=“/post/：id”component={post}）中，例如（siteUrl/post/1），我从props（this.props.match.params）获得（：id），这是有效的

但是当我在单页组件（Post）和这个路由（siteUrl/Post/1）中向这个组件传递新的道具时（：id）

---

道具将更改，但单个组件和父组件不会重新渲染…

要使父组件和子组件都重新渲染，您需要将道具从父组件路径设置为其子组件路径

   // parent using
   <Parent someProp={{someVal}} />

   // parent render:

   render() {
      const { someProp } = this.props
      <Child someProp={{someProp}} />
   }

//使用
//父渲染：
render（）{
const{someProp}=this.props
}

这肯定会重新呈现这两个组件，除非您在

componentshoulldupdate

在您的情况下，

Router

看起来像是

parent

的父级，因此您应该只将路径

：id

作为道具

---

确保

路由器

位于顶层，就在

应用程序

的正下方。重要的是，首先在构造函数中初始化子对象的someVal

 public static getDerivedStateFromProps(
        nextProps,
        nextState
      ) {
        let { someVal } = nextProps;
        if (nextState.someVal !== someVal) {
          return {
            initialVal,
            someVal: someVal
          };
        }
        return null;
      }

---

由于状态更改，它将在道具更改时重新启用

之后，您可能正在使用componentDidMount方法

componentDidMount（）在创建组件后立即调用 安装（插入到树中）。需要DOM的初始化 节点应该在这里。如果需要从远程端点加载数据， 这是实例化网络请求的好地方

但是您需要使用componentDidUpdate

componentDidUpdate（）在更新发生后立即调用。 初始渲染时不调用此方法

您还可以使用状态和其他React特性，而无需编写类。

---

阅读更多信息：

通常，当您希望父级在子级更改时重新渲染时，您会调用父级上的某些函数，然后更改将使其重新渲染的父级状态。您应该使用

组件WillReceiveProps

或在较新版本中使用

getDerivedStateFromProps

并适当设置将触发的状态重新渲染器，我需要子组件重新渲染它的父组件。。。我搜索了很多，但是所有的解决方案都被否决了。你可以使用

{this.state.visible&（…你的组件强制重新渲染…）

来渲染，然后依次将state

visible

值切换到

false

，然后切换到

true

。