Question

我想在list元素中创建一个详细信息视图例如：

项目：/ items

<li>item 1</li>
<li>item 2</li>
<li>item 3</li>

ItemPreview：/ list / 2

<li>item 1</li>
<li><ItemPreview>more details for item 2</ItemPreview></li>
<li>item 3</li>

我的想法是将来自路由器的childrens传递给Item组件......但是传递所有项目特定值的麻烦太多了。但有一个很好的常用方法吗？

Answer 1

我写了JsFiddle that demonstrates a list with routable items。它使用Navigation router而不是React路由器，但我希望你对此持开放态度。您可以看到我将项目列表传递给Items组件，将所选项目传递到Item组件。 Item组件是使用路由器RefreshLink构建的超链接。单击超链接将所选项目编号向下传递，项目组件将更改所选项目的显示。如果您对代码有任何疑问，请告诉我们。

var {StateNavigator} = Navigation;
var {RefreshLink} = NavigationReact;

var Items = ({items, id, stateNavigator}) => (
  <ul>
    {items.map((item, i) => (
      <Item
        item={item}
        id={i}
        selected={i === id}
        key={i}
        stateNavigator={stateNavigator} />
    ))}
  </ul>
);

var Item = ({item, id, selected, stateNavigator}) => (
  <li>
    <RefreshLink
      navigationData={{id: id}}
      disableActive={true}
      stateNavigator={stateNavigator}>
      {!selected ? item : 'more details for ' + item}
    </RefreshLink>
  </li>
);

var stateNavigator = new StateNavigator([
  {key: 'items', route: '{id?}'}
]);

stateNavigator.states.items.navigated = (data) => {
  ReactDOM.render(
    <Items
      items={['item 1', 'item 2', 'item 3']}
      id={data.id}
      stateNavigator={stateNavigator} />, 
    document.getElementById('container')
  );
};

stateNavigator.start();

如何使用React-router创建包含可路由项目的列表？

1 个答案: