Как правильно отобразить ReactiveList - PullRequest
Новая
       8

Как правильно отобразить ReactiveList

0 голосов
/ 22 декабря 2018

Так что у меня есть немного проблемы с макетом - дизайном - просмотром.Я работаю с ReactiveSearch (отличная библиотека!) Для создания поискового интерфейса.Наконец-то все заработало, и теперь я пытаюсь выяснить, как правильно отобразить результаты ... прямо сейчас результаты отображаются на глобальной панели навигации (пояснение ниже), и это, очевидно, не сработает.

У меня есть SearchContainer, который содержит необходимый код для работы ReactiveSearch - в основном у меня есть ReactiveBase, DataSearch и ReactiveList для их автозаполнения, поиска и результатов.Это выглядит так: SearchContainer.js: 

<ReactiveBase
  ...
>
  <DataSearch
    ...
  />
  { loading === false && location.pathname === '/results'
    ? <Route path="/results" component={Results} />
    : null }
</ReactiveBase>

Это прекрасно работает для моей домашней страницы, которая просто импортирует и использует DataSearch для автозаполнения и отправки запросов.

Проблема возникает намаршрут / результаты.У меня есть мой глобальный компонент Navbar, отображаемый с помощью React в моем App.js.Компонент DataSearch в панели навигации отображается условно в зависимости от маршрута (все, кроме '/').

ReactiveList используется для отображения результатов и находится в компоненте Results.Компонент Results условно отображается в SearchContainer на основе маршрута и состояния загрузки (как вы можете видеть выше).

Проблема в том, что результаты отображаются в Navbar, потому что я импортирую SearchContainer в свою Navbar, так что у меня естьПоиск данных в глобальной панели навигации.

Я не могу понять, как я могу отобразить ReactiveList (который находится в компоненте «Результаты») под панелью навигации?- очень похоже на то, как Google / Bing делает это на своих страницах результатов.

...