javascript - 如何包装 React Router v4 的 NavLink 组件？

Question

我正在尝试找出如何包装 React Router v4 的 NavLink 组件来设置默认的 activeClassName。

但是，props 未定义。

包装:

const Test = ({children, props}) => {
  console.log(children) // Blackboard
  console.log(props) // undefined
  return (
    <NavLink activeClassName="active" {...props}>
      {children}
    </NavLink>
  )
}

用途:

<Test to='/blackboard'>Blackboard</Test>

为什么填充了children，但props未定义？

更新:

当使用 to 而不是 props 时，它可以工作。

const Test = ({children, to}) => {

但是，我不确定为什么 props 不起作用。

Answer 1

好的，我现在明白了。

const Test = ({children, to}) => {

children 和 to 是从 props 解构的。

这有效:

const Test = props => 
  <NavLink activeClassName='active' {...props}>
    {props.children}
  </NavLink>