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

我想弄清楚如何包装React Router v4的NavLink组件以设置默认的activeClassName。如何包装React Router v4的NavLink组件？

但是，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不起作用。

来源

2017-02-19 Raphael Rafatpanah

好的，我现在明白了。

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

children和to从props解构。

这工作：

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

来源

2017-02-19 13:52:02

对不起我让你用，因为你是使用路由器V4语法的一些假设。如果你不使用其他道具，我将会采用'children'道具，或者明确地将'to'传递给NavLink，这样你就不会将'children'道具传递给NavLink。 –

@Andy_D，我很高兴你能做到，因为我现在比以前了解得多一点。您是否会对React组件的最佳实践有任何意见/资源？ –

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

回答

相关问题