withRouterでラップされたコンポーネントのpropTypeを定義する方法は？

Question

私は、ベストプラクティスはReact-Routerから、この場合には、サードパーティのHOCでラップされるコンポーネントにwithRouter()をpropTypesを定義するためのものであるかと思っています。

propTypesのポイントは、あなた（および他の開発者）がコンポーネントの期待する小道具を知っていることを理解しています。これが違反した場合、Reactは警告を発します。

したがって、場所に関する小道具は既に人間の介入なしにwithRouter()によって渡されているので、ここでそれらを心配する必要がありますか？この場合、慣例だろう何

const Menu = ({ userId, ...routerProps}) => { 

    const { pathname } = routerProps.location 
    return (
     // Something using userID 
     // Something using pathname 
) 
} 

Menu.propTypes = { 
    userId: PropTypes.number.isRequired, 
    // routerProps: PropTypes.object.isRequired, 
    //^this is undefined, bc withRouter passes it in later? 
} 

export default withRouter(Menu) 

//.... in parent: 
<Menu userId={id} /> 

：ここ

は、私が働いているコンポーネントのですか？

Answer 1

propTypeのポイントは、あなた（そして他の開発者）がコンポーネントの期待する小道具を知っていることを理解しています。これが違反した場合、Reactが警告を出します。

これは正しいです。

この場合の規約は何ですか？

私はあなたがこれに決定的な答えを見つけるとは思わない。あるものを定義した場合、予想されるすべての種類の小道具を定義する必要があると主張する人もいます。あなたがしたように、他の人は親コンポーネント（HOCを除く）によって提供されることはないと言うでしょう。私が最初か最後のカテゴリのいずれかに分類され、そこではすべてのpropTypesと心配していないことを教えてくれます人々の別のカテゴリは...だ

個人的に

：コンポーネントは、他の人による消費のためであれば

• 、 （例えば、TextField、Buttonなどの）共通のUIコンポーネントやライブラリのインターフェイスなどの場合は、propTypesが便利です。それらをすべて定義する必要があります。
• コンポーネントは、特定の目的のために使用されている場合は、単一のアプリケーションでは、それはあなたが間違った小道具が渡されたときに、特に場合（デバッグよりも、それらを維持し、より多くの時間を費やすようにすべての彼らを心配しないように、通常は大丈夫ですあなたは小さく、使いやすい機能部品を書いています）。

routerPropsを含める引数は、今後変更される場合は、withRouterによって提供される小道具の変更から保護することです。上記のスニペットを見ると、あなたがpropTypesが

Menu.propTypes = { 
    userId: PropTypes.number.isRequired, 
    routerProps: PropTypes.object.isRequired 
} 

されるべきだと思うかもしれ

const Menu = ({ userId, ...routerProps}) => { 
    const { pathname } = routerProps.location 
    return (
     // Something using userID 
     // Something using pathname 
) 
} 

：だから、彼らが実際にどうあるべきか、我々は破壊を必要とするあなたはwithRouterためpropTypesを含めると仮定し

しかし、あなたは間違っているだろう...それらの最初の2行は多くのprops変換でパックされます。実際には、それはする必要があります

Menu.propTypes = { 
    userId: PropTypes.number.isRequired, 
    location: PropTypes.shape({ 
    pathname: PropTypes.string.isRequired 
    }).isRequired 
} 

なぜですか？スニペットは同等です：あなたが見ることができるように

const Menu = (props) => { 
    const userId = props.userId 
    const routerProps = Object.assign({}, props, { userId: undefined } 
    const pathname = routerProps.location.pathname 
    return (
     // Something using userID 
     // Something using pathname 
) 
} 

、routerPropsは実際には全くpropsには存在しません。 ...routerPropsはrest parameterなので、propsの他のすべての値を取得します。この場合はlocationです（気にしないこともあります）。

希望に役立ちます。