react-router v4：如何创建类似内容的功能？

【问题标题】：react-router v4: How to create a contentFor like feature?react-router v4：如何创建类似内容的功能？
【发布时间】：2018-06-03 22:04:03
【问题描述】：

我有这个：

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>
  )
}

有没有办法将App 组件中的header 替换为About 组件中的myCustomHeader 组件？

【问题讨论】：

标签： javascript reactjs react-router-v4 react-router-dom

【解决方案1】：

你可以传递一个函数 prop 来更新父母的状态。您必须在 Route 上使用渲染而不是组件来传递道具。

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>
        )
    }
}

【讨论】：