スタイリッシュなコンポーネントを持つ子に渡す小道具を停止する

Question

私はstyled-componentsで初めてプレイしています。私はprimary小道具でこれを呼び出すと、私は<a />要素にprimary小道具を適用していますreactから警告を受ける

import { Link } from 'react-router-dom'; 

const CtaButton = styled(Link)` 
    background: ${props => props.primary ? 'red' : 'yellow'} 
    color: white; 
    display: inline-block; 
    padding: 0.5em 1em; 
`; 

：

は、ここに私のコンポーネントです。なぜこれが起こるのか理解していますが、どうすればそれを止めることができますか？

react-routerのLinkコンポーネントの周りにラッパーを作成することはもちろん可能ですが、これはややこしいでしょう。私はまだこのlibのAPIのプロではない私は確信しています - だから誰かが正しい方向に私を指摘してくださいできますか？

DOMコンポーネントを直接作成すると何らかの理由でこの問題が発生しません（styled.aなど）。

Answer 1

this is a known limitationがstyled-componentsのように見えます。これがうまくいかない理由は、ライブラリがDOM要素（ホワイトリストに基づく）に適用されたときに小道具を取り除くためです。ランダムコンポーネントは実際には予測可能なAPIを持っていないので、これはコンポーネントと同じように実際には実行できません。

作者と貢献者はこれを固定しているが、これは回避策私が思い付いたです：その後、

つまり

import React from 'react'; 
import { Link } from 'react-router-dom'; 

const StyledLink = ({ primary, ...rest }) => <Link {...rest} />; 

export const CtaButton = styled(StyledLink)` 
    background: ${props => props.primary ? 'red' : 'yellow'} 
    color: white; 
    display: inline-block; 
    padding: 0.5em 1em; 
`; 

ストリップはどんなコンポーネント固有の小道具をスタイル別のコンポーネントで構成要素をラップし、残りの小道具を再適用する。それはかなりではありませんが、私が見る限りでは、最も簡単な解決策です。

また、あなたのためにこれを行うだろうHOCを作成することができます。

const withStrippedProps = propsToRemove => TargetComponent => (props) => { 
    const strippedProps = Object.entries(props) 
    .filter(([key]) => !propsToRemove.includes(key)) 
    .reduce((stripped, [key, value]) => ({ ...stripped, [key]: value }), {}); 
    return <TargetComponent {...strippedProps} /> 
}; 

const StyledLink = withoutProps(['primary'])(Link); 
const CtaButton = styled(StyledLink)` 
    // css goes here 
`; 

私は今の答えとしてこれを受け入れるんだけど、ラッパーコンポーネントを作成していない他のアプローチが存在する場合/このような機能、私は別の答えを受け入れるために開いています。