У меня есть некоторые сомнения по поводу того, как реализовать базовое приложение ToDo с некоторой клиентской маршрутизацией с использованием response-router 4.
То, как я это сделал до сих пор, работает, но я чувствуюэто немного странно, и, возможно, это не самый лучший способ справиться с этим.
Вот моя текущая архитектура компонентов:
Точка входа: index.js:
- Он отображает компонент
<App>, заключенный в компонент <Router>. - Компонент
<App> - это мой «умный» компонент с моей логикой и состоянием.
Вопрос 1: Поскольку компонент App является моим "умным" компонентом состояния.Я должен был обернуть это в <Router>, как я сделал?Или лучше переместить <Router> на один уровень вниз, как внутри <App>?
Я просто опишу структуру компонентов и обязанности ниже, а не вставляю полный исходный код, потому что мои вопросыбольше касается структуры файла / компонента и потока props, чем самого кода.
Теперь файл / компонент App.js:
- Это компонент класса.
- Имеет состояние с элементами ToDo.
- Ему принадлежат функции, которые он передает дочерним компонентам, вместе с элементами ToDo, чтобы они могли добавлять и удалять ToDos.
- Он визуализирует компонент
<Layout> и передает задачи и функции для добавления и удаления задач.
Layout.jsфайл / компонент:
- Я выбрал этот компонент
<Layout>, чтобы я мог вставить сюда некоторый «глобальный» CSS, который обслуживает все приложение (я использую стилевые компоненты).Может быть, правила grid / flex, медиазапросы и т. Д. - Он отображает компоненты
<Header>, <Main> и <Footer>.Я планирую использовать их все для проблем, связанных с макетом CSS. - Он также передает
props, полученный от родительского компонента <App>.
Вопрос 2: Имеет ли смысл иметь такой компонент <Layout>?Я надеюсь, что это будет хорошим местом для выполнения некоторых высокоуровневых правил компоновки CSS (со стилевыми компонентами).
<Header> - это просто функциональный компонент, который отображает два <Links>.
<Footer> - это простой нижний колонтитул.
Файл / компонент Main.js:
- Он отображает компонент
<Routes>. - На данный момент я должен упомянуть, что я пытаюсь сохранить все компоненты
<Route> в отдельном файле.Следовательно, компонент <Routes>. - Он также передает
props, полученный от родительского компонента <Layout>.
Вопрос 3: Хотя для меня пока имеет смысл, стоит ли иметь отдельный файл для всех компонентов <Route>?Это не было ясно мне в документации react-router.У них только один пример файла.
Файл / компонент Routes.js:
- Он существует только для того, чтобы объединить все
<Route>. - Он отображает
<Route>s и они будут отображать мою презентацию и интерактивные компоненты пользовательского интерфейса: <TodoList> и <AddTodoForm> в корневом пути "/" и <AboutPage> в пути "/ about".
Вопрос 4: Мне показалось очень странным, как глубоко нужно пройти 1136 *.От <App> до <Layout> до <Main> до <Routes> и, наконец, до компонентов <TodoList> и <AddTodoForm>, которые фактически будут их использовать.Это нормальная вещь в React?Есть ли другой способ обойти это?Могут ли компоненты моего пра-пра-пра-прародителя каким-либо образом передать props непосредственно своим пра-пра-пра-внукам?
Вопрос 5: Есть ли хотя бы более простой способ передачиэти опоры вниз?Так что мне не нужно постоянно повторять название реквизита и делать опечатку в какой-то момент?
Вопрос 6: Все еще о глубоком потоке props.Может ли Redux решить эту проблему или хотя бы сделать ее немного менее странной?
Вопрос 7: Когда я буду нуждаться во вложенной маршрутизации в будущем, смогу ли я сохранить их все в отдельном файле Routes.js?Из того, что я прочитал в документации, я думаю, что это будет возможно.
Заключительные мысли: В любом случае, приложение и маршрутизация в настоящее время работают без проблем.Вот некоторые другие фотографии, чтобы проиллюстрировать это немного лучше.Спасибо за помощь.
Предварительный просмотр приложения
React DevTools details
React DevTools <Main> подробности
ОБНОВЛЕНИЕ:
Только что выяснилось, что я могу использовать синтаксис распространения объектов {...props} для пересылки подпорок вниз по цепочке.Я думаю, что это отвечает на мой вопрос 5. Как в:
