如何包裝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組件？

回答

相關問題