Контекстный API, поднимающий состояние до более высокого компонента - PullRequest
Новая
       25

Контекстный API, поднимающий состояние до более высокого компонента

0 голосов
/ 01 апреля 2020

Я пытаюсь изменить панель навигации в зависимости от того, на какой странице находится приложение, без необходимости создавать отдельные компоненты навигации для каждой страницы. Я хочу, чтобы навигационная панель менялась, когда пользователь переходит на новую страницу «Проекты». Я бы сделал так, чтобы условно отобразить элементы панели навигации в зависимости от параметра url. Как только пользователь щелкнет на go на странице проекта, появится параметр url, например localhost/project/movie. Однако компонент навигационной панели не имеет доступа к match.params.projectId, доступ к нему имеет только компонент страницы проекта, поскольку он находится внутри компонента Route из response-router . Поэтому я хочу создать глобальное состояние, в котором хранится параметр url, чтобы я мог использовать его в компоненте navbar для условной визуализации элементов этого компонента.

Компонент приложения самого высокого уровня 

const App = () => {
  return (
    <div className="app">
      <Header/>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route exact path="/project/:projectId" component={ProjectOverview}/>
      </Switch>
    </div>
  );
}

Нижний уровень Компонент страницы проекта 

const ProjectOverview = ({ match }) => {
    useEffect(() => {
        window.scrollTo(0, 650);
    }, []);

    let project = {};

    if(match.params.projectId === 'movie'){
        project = {
            p: 'Browse your favorite Movies, TV shows, and actors. Search for specific movies, shows or actors by date, rating, region and other categories. Browse the latest and greatest films and to find information about its actors, crew, and reviews. Rate and favorite Movies, TV shows and actors while having access to them through a user account. Login / Authentication.',
            img: 'http://www.technologies.com/images/cloud-summary.png',
            gif: 'https://giphy.com/media/mUgG6FZuWN9V1/giphy.gif',
            list: ['React', 'Redux', 'Hooks', 'TMDB API', 'Sass', 'React Router']
        }
    } else if(match.params.projectId === 'ecommerce'){
        project = {
            p: 'Something else',
            img: 'http://www.technologies.com/images/cloud-summary.png',
            gif: 'https://giphy.com/media/IgASZuWN9V1/giphy.gif',
            list: ['React', 'Redux', 'Hooks', 'TMDB API', 'Sass', 'React Router']
        }
    }

    return(

Я знаю, что провайдер должен обернуть вокруг элемента header (navbar) внутри компонент приложения, но необходимое значение состояния (match.params.projectId) можно найти только в компоненте страницы проекта. Мне интересно, как я мог получить значение для провайдера равным параметру url внутри компонента страницы проекта. Я постараюсь уточнить свой вопрос, если он кому-то кажется слишком запутанным. Спасибо

1 Ответ

1 голос
/ 02 апреля 2020

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

function App() {

  const [title, setTitle] = useState('');

  return <Router>
      <Navbar title={title} />
       <Switch>
         <Route path="/product/:id" exact render={props => <ProductPage {...props}  setTitle={setTitle} />} />
       </Switch>
       </Router>
}

И в ProductComponent: 

function ProductionComponet({setTitle, match}){
 useEffect(()=>{
   setTitle(`product ${match.params.id}!`)
 },[])
}
...