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

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


reactjs react-component
person virginiarcrz    schedule 07.03.2019    source источник

Ответы (4)


arrow_upward
0
arrow_downward

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

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

Затем в заголовке используйте currentTitle, чтобы изменить заголовок.

person Anil Kumar    schedule 07.03.2019

arrow_upward
0
arrow_downward

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

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

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

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

person Mr. J    schedule 07.03.2019

arrow_upward
0
arrow_downward

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

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

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

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

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

person Carlos Lombardi    schedule 07.03.2019
comment
Спасибо, Карлос, я поставил это, но не работает. My Page 1 — это класс, расширяющий компонент. - person virginiarcrz; 07.03.2019

arrow_upward
0
arrow_downward

вы можете использовать библиотеку 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)

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

person David Zambrano    schedule 07.03.2019
comment
Спасибо, Давида, но я не использую для этого избыточность. - person virginiarcrz; 07.03.2019