Question

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

我搜索了很多，但是所有解决方案在新的React版本中都已弃用。

在我的任何页面（路由精确路径=“ / post /：id” component = {post}）中，例如（siteUrl / post / 1）我正在从道具（this.props.match。）获取（：id）。参数），并且有效。

但是当我将新的Props传递给此组件（：id）时，在单页组件（Post）和此Route（siteUrl / post / 1）中。

道具将更改，但单个组件和父组件将不会重新呈现...

Answer 1

要重新渲染父级和子级，您需要将prop从父级传递到其子级。

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

   // parent render:

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

这肯定会重新渲染两个组件，除非您在componentShouldUpdate中声明了另一个逻辑

在您的情况下，Router看起来像是Parent的父项，因此您仅应将路径:id作为道具。

确保Router位于顶层，就在App下方

Answer 2

重要的是，您首先在构造函数中初始化子项的someVal

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

由于状态更改，它将在属性更改后重新呈现

Answer 3

您可能正在使用componentDidMount方法。

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

但是您需要使用componentDidUpdate。

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

您也可以在不编写类的情况下使用状态和其他React功能。了解更多：https://reactjs.org/docs/hooks-effect.html

道具更改时渲染反应组件

3 个答案: