[英]react-router v4: How to create a contentFor like feature?
我有這個:
import { Route } from 'react-router-dom'
const App = () => (
<div>
{header} // or the header block
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</div>
)
然后我的About組件如下所示:
const About = () => {
// contentFor header
const myCustomHeader = <div>About header</div>
return (
<div>
About page
</div>
)
}
有沒有辦法用About
組件中的myCustomHeader
組件替換App
組件中的header
?
您可以傳遞功能道具來更新父母狀態。 您必須在路徑上使用渲染而不是組件來傳遞道具。
import { Route } from 'react-router-dom'
import React from 'react'
class App extends React.Component{
state = {
header:"One Header"
}
render(){
return (
<div>
{this.state.header} // or the header block
<Route exact path="/" component={Home} />
<Route path="/about" render={()=><About updateHeader={(newHeader)=>this.setState({header:newHeader})} />}/>
</div>
)
}
}
和您的簡介:
import React from 'react'
class About extends React.Component{
render(){
this.props.updateHeader(<div>About header</div>);
return (
<div>
About page
</div>
)
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.