选择反应路由器时的setState(React)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了选择反应路由器时的setState(React)相关的知识,希望对你有一定的参考价值。
我在react框架中创建了一个Web应用程序。当我进入适当的路由器时,我试图将状态更改为文本。如何编写它以使其正常工作?
class Header extends React.Component {
state = {
title: ""
};
render() {
const { title } = this.state;
return (
<div>
<Typography variant="h6" color="inherit" noWrap>
{title}
</Typography>
<Switch>
<Route exact path="/" component={HomePage} title="Dashboard" />
<Route path="/payment" component={FeaturePage} title="Payment" />
<Route path="" component={NotFoundPage} />
</Switch>
</div>
);
}
}
答案
您可以将更新功能传递给组件,同时仍然使用React路由器。
class Header extends React.Component {
state = {
title: ""
};
updateTitle(newTitle){
this.setState({title: newTitle})
}
render() {
const { title } = this.state;
return (
<div>
<Typography variant="h6" color="inherit" noWrap>
{title}
</Typography>
<Switch>
<Route exact path="/" render={()=> <HomePage updateTitle={this.updateTitle}/>} title="Dashboard" />
<Route path="/payment" render={()=> <FeaturePage updateTitle={this.updateTitle}/>} title="Payment" />
<Route path="" component={NotFoundPage} />
</Switch>
</div>
);
}
}
以上是关于选择反应路由器时的setState(React)的主要内容,如果未能解决你的问题,请参考以下文章
[React] Understanding setState in componentDidMount to Measure Elements Without Transient UI State(代
反应:TypeError:无法读取未定义的属性“setState”
React s-s-r路由器-导航到子路由时的redux状态丢失