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组件？

1 个答案: