Reactjs 如何在nextJS中ssr条件组件？

我一直在使用nextjs、react和redux，但我被卡住了

我想ssr我的条件组件。我的代码有3个内容组件，如果用户根据上述条件单击导航栏组件中的链接，将呈现这些内容组件。该代码的工作原理与我想要的完全相同，但是当我在Chrome中查看源代码时，没有任何

组件得到渲染。 这是我的密码：

import React，{Component}来自'React'；
从“下一个/动态”导入动态；
从“NProgress”导入NProgress；
从'react redux'导入{connect}；
从“下一个/路由器”导入路由器；
进口{
财政行动，
卡里耶苏克斯行动，
加亚希德行动
}来自“/actions/navbar/navbar”；
从“/components/Navbar/SearchBar”导入搜索栏；
从“/components/Navbar/Nav”导入导航；
常量内容=动态（导入（'/components/Navbar/Content'）；
Router.onRouteChangeStart=url=>{
log（`Loading:${url}`）；
NProgress.start（）；
};
Router.onRouteChangeComplete=（）=>NProgress.done（）；
Router.onRouteChangeError=（）=>NProgress.done（）；
类导航栏扩展组件{
状态={
伊斯克里克：错，
活动：“”
};
componentDidMount（）{
document.addEventListener（'click'，this.handleclickout）；
}
组件将卸载（）{
document.addEventListener（'click'，this.handleclickout）；
}
handleClickOutside=e=>{
如果（this.nav&&！this.nav.包含（e.target））{
这是resetNavbar（）；
}
};
重置导航栏=（）=>{
这是我的国家({
伊斯克里克：错，
活动：“”
});
};
handleClick=（e，数据）=>{
e、 预防默认值（）；
const cond=data==e.target.className | | data==e.target.id；
如果（秒）{
这是我的国家({
伊斯克里克：是的，
活动：数据
});
}
如果（数据===此.state.active）{
这是我的国家({
伊斯克里克：错，
活动：“”
});
}
};
handleContent=id=>{
如果（this.state.active==='Gaya Hidup'）{
this.props.fetchGayaHidup（id）；
}else if（this.state.active==='Finansial'）{
this.props.fetchFinansial（id）；
}否则{
this.props.fetchKarierSukses（id）；
}
};
RenderRow=（类型、数据）=>{
返回；
};
render（）{
康斯特·卡里尔苏克斯={
16:‘卡里尔’，
15:‘苏克斯’，
10:‘Edukasi’
};
常数gayahidup={
16:‘芙蓉’，
17:“Jalan Jalan”，
18.‘泰克诺’，
19.‘霍比’，
八:"湖本安",，
9:‘佩尼卡汉’，
14:‘Keluarga’，
12.“凯西哈坦”，
15.‘鲁玛’，
11:“Otomotif”
};
const finansial={16:'Bisnis'，11:'Keuangan'，12:'Investasi'}；
常数{
imgBig，
内容财务，
康特卡里尔苏克斯，
contentGayaHidup
}=这是道具；
const{active，isClick}=this.state；
返回(
（this.nav=node）}>
{/*类别导航*/}
{/*类别内容*/}
{this.state.active==='Gaya Hidup'(
) : (
''
)}
{this.state.active==='Finansial'(
) : (
''
)}
{this.state.active==='Karier&Sukses'(
) : (
''
)}
{this.state.active==='搜索栏'？：'''}
{/*  */}
);
}
}
函数MapStateTops（状态）{
返回{
contentFinansial:state.navbar.category.finansial，
contentKarierSukses:state.navbar.category.karierSukses，
contentGayaHidup:state.navbar.category.gayaHidup
};
}
导出默认连接（MapStateTops{
fetchGayaHidup:actionGayaHidup，
fetchFinansial:actionFinansial，
fetchKarierSukses:actionKarierSukses
})（导航栏）；

显然，contentGayaHidup（例如）是作为道具传递的，单击导航栏后，我说的对吗？在这个代码之外发生了很多事情

你能试试下面的一种方法看看这是否是问题所在吗？如果这确实是问题所在（contentXXXXXX道具正在更新，但未传递到渲染），您可能必须找到另一种方法来传递它们；通过州政府（可能是相当广泛的），通过redux可能

Hati2 teman

1-将道具传递给州政府

构造函数（道具）{
超级（道具）；
this.state={contentGayaHidup:this.props.contentGayaHidup}
}
//还有代码吗
render（）{
返回(
{this.state.active==='Gaya Hidup'(
) : (
''
)}
)
}

2-使用组件更新

componentDidUpdate（prevProps，prevState）{
const{contentGayaHidup}=this.props；
if（contentGayaHidup！==prevProps.contentGayaHidup）{
this.setState（{contentGayaHidup:this.props.contentGayaHidup}）
}
}
//还有代码吗
render（）{
返回(
{this.state.active==='Gaya Hidup'(
) : (
''
)}
)
}

显然，contentGayaHidup（例如）是作为道具传递的，单击导航栏后，我说的对吗？在这个代码之外发生了很多事情

你能试试下面的一种方法看看这是否是问题所在吗？如果这确实是问题所在（contentXXXXXX道具正在更新，但未传递到渲染），您可能必须找到另一种方法来传递它们；通过州政府（可能是相当广泛的），通过redux可能

Hati2 teman

1-将道具传递给州政府

构造函数（道具）{
超级（道具）；
this.state={contentGayaHidup:this.props.contentGayaHidup}
}
//还有代码吗
render（）{
返回(
{this.state.active==='Gaya Hidup'(
) : (
''
)}
)
}

2-使用组件更新

componentDidUpdate（prevProps，prevState）{
const{contentGayaHidup}=this.props；
if（contentGayaHidup！==prevProps.contentGayaHidup）{
this.setState（{contentGayaHidup:this.props.contentGayaHidup}）
}
}
//还有代码吗
render（）{
R