时间戳

首页 > 解决方案 > NextJS 动态路由，重新渲染特定子组件

javascript - NextJS 动态路由，重新渲染特定子组件

问题描述

我有 index.js 页面，位于

页面/帖子/index.js

我可以使用链接呈现此页面：

<Link href={`/posts`} />

这是我的 index.js 页面：

function mainComponent({props}) {
 <>
  <MainComponent>
   <ChildComponent1/>
   <ChildComponent2 props={propsValue}/>
  <MainComponent/>
 </>
}

现在，通过 NextJs 的动态路由，我想使用查询参数并调用 api 来获取 propsValue

<ChildComponent2 props={propsValue}>

我使用动态路由，这个链接：

<Link href={/posts/${dynamic-pageId}} />

我可以使用从 API 获得的值 propsValue重新渲染ChildComponent2吗？

注意：我没有物理文件作为/pages/posts/${dynamic-pageId}，我想使用那个/pages/posts/index.js，因为我也必须在这个hirerachy中渲染：

<>
<MainComponent>
 <ChildComponent1/>
 <ChildComponent2 props={propsValue}/>
<MainComponent/>

NextJs 有可能吗？

标签： javascriptreactjsnext.jsrouterdynamic-routing

解决方案

当 props 参数更改时，组件会使用更改后的 props 进行渲染。

现在，由于 MainComponent 正在使用children，我们无法阻止它在没有昂贵计算的情况下重新渲染，这无论如何都是开销。

但是，我们可以ChildComponent1通过将其实现为 PureComponent 来防止重新渲染

class ChildComponent1 extends React.PureComponent {}

如果您的 ChildComponent1 是一个功能组件，您可以使用 React.memo 来防止在组件没有任何更改的情况下重新渲染

const ChildComponent1 = React.memo((props) => {
    // logic here
})

推荐阅读