如何包装 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>

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

How to wrap React Router v4's NavLink component?

javascript

reactjs

react-router

react-router-v4