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

Question

Рассмотрим следующие компоненты:

1)

import React from 'react';

const toolbar = (props) => (
  <header>   
    <nav>
        <ul>
            <li style={{display: props.displayHome}}>Home</li>
            <li>About Us</li>
            <li>Contact</li>
        </ul>
    </nav>   
  </header>
);

export default toolbar;

2)

import React, {Component} from 'react';

import Toolbar from '../../components/Navigation/Toolbar/Toolbar';

class Layout extends Component {
  render() {   
    return (
      <div>
        <Toolbar displayHome={this.props.displayHome}/>
        <main>
          {this.props.children}
        </main>
      </div>
    );
  }
}

export default Layout;

3)

import React, { Component } from 'react';
import {Route, Switch} from 'react-router-dom';

import Layout from './hoc/Layout/Layout';
import Homepage from './components/Homepage/Homepage';
import CategoryPage from './containers/CategoryPage/CategoryPage';
import SingleMealPage from './containers/SingleMealPage/SingleMealPage';
import SearchPage from './containers/SearchPage/SearchPage';
import AboutUsPage from './components/AboutUs/AboutUsPage';
import ContactPage from './components/Contact/ContactPage';

class App extends Component {
  render() {
    return (
      <div>
        <Layout>
          <Switch>
            <Route path="/category" component={CategoryPage} />
            <Route path="/singleMeal" component={SingleMealPage} />
            <Route path="/searchResults" component={SearchPage} />
            <Route path="/aboutUs" component={AboutUsPage} />
            <Route path='/contact' component={ContactPage} />
            <Route path="/" component={Homepage} />
          </Switch>
        </Layout>
      </div>
    );
  }
}

export default App;

Я хочу отобразитьВкладка «Главная» на каждой странице, кроме главной.

Очевидно, что я могу сделать это, импортировав компонент панели инструментов в каждый соответствующий компонент, а затем индивидуально управляя свойством «displayHome», но есть ли способ добиться этого с помощью текущегоустановка?

Answer 1

Ofcourse. Прямо сейчас вы управляете компонентами без состояния как компоненты без состояния. Теперь создайте компонент с состоянием, чтобы сказать, когда будет отображаться Дом: (Я использовал реагирующие хуки, так как у вас уже есть компонент функции)

Используйте реквизиты рендеринга маршрута для передачи реквизитов в компонент, как это:

Вариант 1: Использовать реквизит рендеринга

const [needsHomeMenu, setNeedsHomeMenu] = useState(false); // you can use this.setState({needsHomeMenu: true}) to achieve.
.
.
.
<Toolbar displayHome={needsHomeMenu}/> //Toolbar depends on this state
.
.
// update state from within the component that propagates to Toolbar
<Route path="/category" render={() => (<CategoryPage doesNeedHome={setNeedsHomeMenu} />)} /> 

В CategoryPage.js , получить реквизит и примонтировать, doesNeedHome(true)

In HomePage.js , doesNeedHome(false). Теперь состояние изменяется и обновляется реквизит Панели инструментов, и дом исчезает.

---

Опция 2:

Используйте реквизиты маршрутизатора, чтобы выбрать местоположение пути вместо маршрутарендер в Варианте 1. В CategoryPage.js и HomePage.js , получить опору и при монтировании, doesNeedHome(this.props.location.pathname==='/') или doesNeedHome(this.props.location.pathname==='/home')

Обновление состояния покоято же, что и выше.

Компонент необходимо соответствующим образом реорганизовать в файлах различий.

Answer 2

Самый простой способ в вашем случае - проверить (this.props.location.pathname !== '/') в компоненте приложения и передать результат в Layout

Другой способ - обернуть вызов панели инструментов в маршрутизации

class Layout extends Component {
  render() {
    return (
      <div>
        <Switch>
          <Route exact path="/" component={() => <Toolbar displayHome={false} />} />
          <Route path="/*" component={() => <Toolbar displayHome={true} />} />
        </Switch>

        <main>
          {this.props.children}
        </main>
      </div>
    );
  }
}