Реагируйте на обновление родительского компонента через контекст для создания глобального AppBar - PullRequest
Новая
       23

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

1 голос
/ 15 октября 2019

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

Я не хочу копировать вставлять компонент AppBar для каждого подкомпонента и устанавливать реквизиты для отображения заголовка. ,Вот почему я хочу вызвать родительский компонент и установить заголовок.

Я не уверен, как мне это сделать с новым контекстным API, и это даже правильный (Реагирующий) способ сделать.

Вот упрощенный код, который я использую: 

   import React from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route
} from "react-router-dom";


function NoMatch(){
    //HOW TO SET PARENT TITLE
    return 'Not found'
}

function Home(){
    //HOW TO SET PARENT TITLE
    return 'Here is home'
}

function AppBar(){
    var title = "default"
    return (
        <div style={{background:"red", width:"100%"}}>{title}</div>
        );
}

function Other(){
    //HOW TO SET PARENT TITLE
    return (
        'Other'
    )
}


function App() {

    return (
        <div>

            <AppBar></AppBar>
            <Router>
                <Route>
                    <Switch>
                        <Route exact path="/">
                            <Home />
                        </Route>
                        <Route exact path="/other">
                            <Other />
                        </Route>
                        <Route path="*">
                            <NoMatch />
                        </Route>
                    </Switch>
                </Route>
            </Router>
        </div>
    );
}

export default App;
...