Блог

Я просто изучаю React и испытываю небольшие проблемы с определением наилучшей структуры компонентов для моего приложения.

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

У меня есть 2 вопроса:

1) Если я хочу поменять «СПИСОК ЭЛЕМЕНТОВ» на «ДОБАВИТЬ ФОРМУ ЭЛЕМЕНТА», когда пользователь нажимает «ДОБАВИТЬ ЭЛЕМЕНТ BTN» в правом верхнем углу, каков наилучший способ структурировать это?

У меня мог бы быть один маршрут, который загружает ListItemsPage компонент, а затем другой с помощью an AddItemPage , но оба они будут содержать много избыточного кода (в основном другие компоненты: элементы управления боковой панелью, список групп и т. Д.). Я предполагаю, что есть более простой способ справиться с подобными вещами. Или, возможно, я мог бы выполнить оператор if, который загружает либо список элементов, либо форму добавления элемента на основе текущего URL-адреса.

2) Какова наилучшая стратегия для перенаправления в группу по умолчанию? Если кто-то переходит в /group/7, мы загружаем список элементов группы 7. Однако, если кто-то перейдет в / group, я бы хотел по умолчанию использовать первую группу в списке групп, чтобы правая часть приложения никогда не была пустой.

Мои маршруты: (открыты для их изменения, если это будет иметь больше смысла)

 <Route path="/" component={App}> {/* should go to /group/1 */}
  <IndexRoute component={Home} />
  <Route path="/group/add" component={GroupAdd} />
  <Route path="/group/:id" component={GroupDetail} />
  <Route path="/group/:id/item/add" component={ItemAdd} />
  <Route path="/settings" component={Settings} />
</Route>
  

После небольшого копания в выходные я пришел к этому решению. Я не уверен, что это оптимально, но, похоже, в настоящее время он отлично работает для меня.

Надеюсь, это кому-то поможет: D

Маршрут:

 <Route path="/" component={App}>
  <IndexRedirect to="/group" />
  <Route path="group" component={GroupMain}>
    <Route path="add" component={GroupAdd} />
    <Route path=":groupId" component={GroupHome} />
    <Route path=":groupId/item">
      <Route path="add" component={ItemAdd} />
    </Route>
  </Route>
</Route>
  

Где я хочу, чтобы дочерние элементы появлялись в GroupMain:
(Где вы видите «СПИСОК ЭЛЕМЕНТОВ» в моем макете)

 {this.props.children ? React.cloneElement(this.props.children, { propsYouWantToPassToChildren }) : ''}
  

Затем для обработки перенаправления на идентификатор по умолчанию в GroupMain

 componentWillReceiveProps(nextProps) {
  const { dispatch, groups, selectedGroup, params } = nextProps;
  const { groupId } = params;

  // The URL does not match the state. Update state.
  if (typeof groupId !== 'undefined' amp;amp; (selectedGroup !== groupId || selectedGroup.length === 0)) {
    dispatch(selectGroup(groupId));
    return;
  }

  // No selectedGroup and No groupId in URL. Update state.
  if (typeof groupId === 'undefined' amp;amp; selectedGroup.length === 0 amp;amp; Object.keys(groups).length > 0) {
    const newSelectedGroup = Object.keys(groups)[0];
    dispatch(selectGroup(newSelectedGroup));
    this.context.router.push(`/group/${newSelectedGroup}`);
  }
}