Как передать реквизит компоненту в действии

Question

У меня есть 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);

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

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

Answer 1

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

как то так

 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)

Page1

 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)

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

Answer 2

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

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

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

или все, что вам нужно.

Answer 3

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

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

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

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

Надеюсь, это поможет - Карлос

Answer 4

ПЕРЕМЕЩАЙТЕ ГОЛОВКУ ВНУТРИ Page1 И Page2.

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

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