Question

我正在学习React，并且在为我的应用找出最佳组件结构时遇到一些麻烦。

所以这是我的应用程序的粗略表示。大多数页面布局都会与此类似，只有少数例外。

我有两个问题：

1）如果我想换掉＆＃34;项目清单＆＃34;对于＆＃34;添加项目表格＆＃34;当用户点击＆＃34;添加项目BTN＆＃34;在右上角，构建这个的最佳方法是什么？

我可以有一个路由加载ListItemsPage组件，然后另一个加载AddItemPage，但这两个组件都会有很多冗余代码（大多数是其他组件：侧栏控件，列表团体等）。我假设有一种更简单的方法来处理这类事情。或者我可以做一个if语句来加载项目列表或基于当前URL路径添加项目表单。

2）重定向到默认组的最佳策略是什么？如果有人进入/ group / 7，那么我们加载Group 7的项目列表。但是，如果有人进入/分组，我希望默认使用组列表中的第一个组，以便应用程序的右侧永远不会为空。

我的路线：（如果更有意义，可以更改这些内容）

<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>

Answer 1

经过一段时间的挖掘，我最终得到了这个解决方案。我不确定它是否是最佳的，但它目前似乎对我有用。

希望这有助于那里的人：D

路线：

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.stream.Collectors;

public class LocationHelper
{
  private static List<Location> holdsLocks = new ArrayList<Location>();

  private static final List<Location> locations = new ArrayList<>();

  private static int printLocks = 0;

  static
  {
    locations.add(new Location(1, Arrays.asList(1, 2, 3, 4, 5)));
    locations.add(new Location(2, Arrays.asList(1, 2, 3, 4)));
    locations.add(new Location(3, Arrays.asList(1, 2, 3, 4)));
    locations.add(new Location(4, Arrays.asList(3, 4, 5)));
    locations.add(new Location(5, Arrays.asList(1, 2, 3, 4, 5)));
  }

  public static List<Location> getLocations()
  {
    return locations;
  }

  public static Location getLocation(int id)
  {
    return locations.stream().filter(l -> l.getId() == id).findFirst()
        .orElse(null);
  }

  public static synchronized boolean acquireLocks(Location location)
  {
    if (printLocks % 5 == 0)
    {
      locations.stream()
          .forEach(l -> System.out.printf("Location: %d status: %s\n",
              l.getId(), String.valueOf(l.isUnlocked())));
    }
    List<Location> required = location.getDependentLocationIds().stream()
        .map(LocationHelper::getLocation).collect(Collectors.toList());
    // If not available fail to lock.
    if (required.stream().filter(l -> !l.isUnlocked()).count() > 0L)
    {
      return false;
    }
    else
    {
      try
      {
        required.stream().forEach(Location::blockLocation);
        holdsLocks.add(location);
        return true;
      }
      catch (Exception e)
      {
        // TODO Auto-generated catch block
        e.printStackTrace();
        required.stream().forEach(Location::releaseLocation);
        return false;
      }
    }
  }

  public static boolean releaseLocks(Location location)
  {
    if (!holdsLocks.contains(location))
    {
      return false;
    }
    else
    {
      List<Location> required = location.getDependentLocationIds().stream()
          .map(LocationHelper::getLocation).collect(Collectors.toList());

      try
      {
        required.stream().forEach(Location::releaseLocation);
        holdsLocks.remove(location);
        return true;
      }
      catch (Exception e)
      {
        // TODO Auto-generated catch block
        e.printStackTrace();
        return false;
      }
    }
  }
}

我想让孩子出现在GroupMain中：（你在我的模型中看到“项目列表”）

<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中处理重定向到默认ID

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

组件结构：根据react-router路径交换一个组件

1 个答案: