Блог

У меня есть 2 компонента страницы со своими собственными маршрутами. Есть один компонент заголовка, который должен использоваться на обеих страницах, и предполагается, что он изменяет свое содержимое в зависимости от того, на какой странице вы находитесь.

Как я могу изменить содержимое в заголовке для каждой страницы?

  return (
        <main className={theme.main}>
            <Header 
                title={this.state.headerTitle}
                boldTitle={this.state.boldTitle}
            />
            <div className={theme.content}>
                <Switch>
                    <Route path={'/page1'} component={Page1} />
                    <Route path={'/page2'} component={Page2} />
                </Switch>
            </div>
            <Footer/>
        </main>
    );
  

Я пытаюсь передать реквизиты в заголовок на моей странице маршрутов, как в приведенном ниже коде.

 <Route path={'/page2'} component={Page2} currentTitle={this.state.headerTitle} />
  

Обновить

Я получил это, исправил это с помощью import { withRouter } from "react-router"; и

export default withRouter(Header);

затем в компоненте Header он прослушивает маршруты, и я могу указать путь для выполнения того, что мне нужно.

Тогда мне не нужно состояние set up, просто прослушайте маршруты внутри этого MyComponent. Usign: this.props.location

ПЕРЕМЕСТИТЕ СВОЙ ЗАГОЛОВОК ВНУТРИ страниц1 И Page2.

 <Route path={'/page2'} component={() => <Page2  currentTitle={this.state.headerTitle} 
 />} />
  

Затем в заголовке используйте currentTitle для изменения заголовка.

Поместите заголовок в его собственный компонент и импортируйте его отдельно в каждый компонент страницы.

Затем вы можете передавать реквизиты в заголовок, подобный этому, при вызове заголовка на каждой странице…

 import Header from (wherever that component is)

class Page# extends React.component {

other code

render() {
return (
         <div>
           <Header currentTitle="this.state.headerTitle" />
           <rest of code for this page /> 
         </div> 
}
  

или любой другой реквизит, который вам нужен.

Я предполагаю, что код, который вы показываете, находится внутри render() метода некоторого компонента React, так что у вас действительно есть состояние.

Обратите внимание, что component атрибут в Route теге ожидает значение, которое является функцией без аргументов. Компонент, который будет отображаться, является результатом функции. Но ничто не запрещает вам проделать некоторую работу, прежде чем возвращать значение. Я бы попробовал что-то вроде этого

 <Route path={'/page1'} component={() => {
    this.setState({headerTitle: ...what you want..., boldTitle: ...what you want...})
    return <Page1 />
}}/>
  

Если Page1 это просто функция, измените строку «return» на return Page1()

Надеюсь, это поможет — Carlos

вы можете использовать библиотеку redux в качестве глобального состояния

что-то вроде этого

  class Main extends Component{
    render(){
    return (
            <main className={theme.main}>
                <Header 
                    title={this.props.headerTitle}
                    boldTitle={this.state.boldTitle}
                />
                <div className={theme.content}>
                    <Switch>
                        <Route path={'/page1'} component={Page1}/>
                        <Route path={'/page2'}component={Page2}
                        />
                    </Switch>
                </div>
                <Footer/>
            </main>
        )
    }
    const mapStateToProps = state =>{
     return {     headerTitle: state.headerTitle    }
    }
    export default connect(mapStateToProps)(Main)
  

Страница 1

  class Page1 extends Component{    
    changeTitle =()=>{
     this.props.actions.changeTitle("title from Page1")
    }
    render(){
    return (
    <div>
    <button onClick={this.changeTitle}>changeTitle</button>
    </div>
    )
    }
    const mapDispatchToProps = (dispatch)=> {
        return {
            actions: bindActionCreators({ changeTitle }, dispatch)
        }
    }
    export default connect(null, mapDispatchToProps)(Page1)
  

этот код не работает, но это идея, как вы можете использовать redux для этой цели