React-Router v4-将参数传递给withRouter

Question

这段代码可以正常工作：

const LinkButton = withRouter(({ history }) => (

  <ListItem button onClick={() => history.push('/url1')}>
    <ListItemIcon>
      <ListIcon />
    </ListItemIcon>
    <ListItemText primary="name1" />
  </ListItem>
))

现在，我尝试将数组映射到相同的组件并得到错误：

const navItems = [{ name: 'name1', url: '/url1' }, { name: 'name2', url: '/url2' }];



 const items = navItems.map(
  item => withRouter(({ history }) => (

    <ListItem button onClick={() => history.push(item.url)}>
      <ListItemIcon>
        <ListIcon />
      </ListItemIcon>
      <ListItemText primary={item.name} />
    </ListItem>
  ))()
);

错误文本：TypeError：无法读取未定义的属性'wrappedComponentRef'。

有任何想法吗？

Answer 1

withRouter是一个高阶组件，它返回组件类 （ MyComponent ）而不是组件实例 （ <MyComponent /> ）。

另外， LinkButton是硬编码的; 它不接受道具道具。

然后，您需要更新至以下内容：

let LinkButton = ({ history, ...item }) => (

  <ListItem button onClick={() => history.push(item.url)}>
    <ListItemIcon>
      <ListIcon />
    </ListItemIcon>
    <ListItemText primary={item.name} />
  </ListItem>
);

LinkButton = withRouter(LinkButton);

现在，循环应为：

navItems.map(item => <LinkButton {...item} key={item.name} />);