Экспорт NavBar с реквизитами для выбранной страницы

Question

Я экспортирую панель навигации для навигации. js но я также хочу экспортировать выбранную ссылку на страницу, чтобы система навигации. js знала, какую страницу отображать. Но как бы я ни старался, я не могу. Это кажется банальным, но reactJS накладывает самые странные ограничения ...

... можно подумать, если бы это была другая среда, импортировав компонент, вы получили бы доступ ко всему внутри этого компонента, но не в reactJS!

Как я могу передать этот параметр вместе с самой панелью навигации в компонент навигации?

код панели навигации:

case "Tile7":
       console.log("SetAllTileStyles [" + eventTileName + "] for [" + eventAction + "]");
      divToChange = document.getElementById('Tile5');
      divToChange.style.backgroundColor = 'blue';
      divToChange.style.fontFamily = 'londrinaBookRegular';
      divToChange.style.color = 'yellow';

       // set remaining tiles to default
       SetDivToDefault("Tile1", eventAction);
       SetDivToDefault("Tile2", eventAction);
       SetDivToDefault("Tile3", eventAction);
       SetDivToDefault("Tile4", eventAction); 
       SetDivToDefault("Tile5", eventAction); 
       SetDivToDefault("Tile6", eventAction); 
       
       // Navigate to the appropriate page
       setPageLink("Engage");
 break; // end of Case Tile7 

return (
        ... divs for Tiles 1-6...

        <div
          id="Tile7"
          className="linkcontainer"
          onClick={HandleClick}
          onMouseEnter={e => HandleMouseEnter(e)}
          onMouseLeave={e => HandleMouseLeave(e)}
         >Engage
        </div> 
     ) // end Return

export default Navbar;

Answer 1

Я попытался использовать метод реквизита, но столкнулся с проблемами незаконности состояния при импорте константы состояния в навигацию. * так что теперь он работает лучше, поскольку я получаю страницу по умолчанию, которая является «Home».

Однако, когда я нажимаю на панель навигации, она запускает код HandleClick, но не вызывает повторный экспорт обновил pageLink, хотя он должен что-то экспортировать, потому что цвет на панели навигации меняется !!

Я не знаю, как это исправить! Я почти уверен, что не могу добавить оператор экспорта в дочернюю функцию ...

Я также получаю противоречивые сообщения об ошибках, если использую заглавную букву для имени страницы - как в «Главная» и если Я использую строчные буквы в начале, как в «home» ...

«Компоненты», о которых я говорю, не являются функциями - это отдельные файлы в src / components. Могу ли я передать реквизиты этим файлам? Полагаю, я уже делаю это с операторами экспорта и импорта ...

Большое спасибо за то, что удосужились ответить. Я очень ценю это: -)

Answer 2

Заполнение React Hole ...

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

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

Обычно, когда пользователь нажимает панель навигации, функция HandleClick не производит экспорт, и ничего не происходит.

Чтобы обойти это, я сохраняю требуемую страницу в файле cook ie (npm sfCookies), а затем запускаю javascript pageRefre sh функция, которая вызывает экспорт.

В операторе экспорта я прочитал требуемую страницу от повара ie.

export default Navbar;
export const pageToInclude = read_cookie('savedpage');

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

Вам нужно сохранить его где-нибудь навсегда, потому что refreshPage перезагружает страницу из кеша и стирает все заданные вами переменные.

Вы не можете использовать состояние константа либо потому, что когда вы обновляете pageName, оно не вступит в силу до следующего рендеринга, а при запуске refreshPage этого рендеринга не будет.

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

: -)

Answer 3

Было бы очень полезно, если бы вы могли предоставить ссылку CodeSandbox. Хотя я предполагаю, что вы пытаетесь передать данные обратно родительскому элементу из дочернего компонента.

Функция setPageLink вместо определения в компоненте Navbar, который, как я предполагаю, является дочерним компонентом, вы можете определить его в родительском элементе и передайте его как свойства этому компоненту Navbar.

итак, чтобы подвести итог

function Parent(props) {
  const [link, setPageLink] = useState('Engage');
  return <Child setPageLink={setPageLink}/>;
}

function Child({setPageLink}) {
   // use setPageLink from props like this setPageLink("Hi");
   // ... your child component
}