bugfix> reactjs > 投稿

私はこれらのコンポーネントを持っています:...

const Card = () => <span>There is content</span>
const CardItem = styled(Card)`
  background-color: red;
`

今、私はこのような上記の別のコンポーネントが必要です:

const Card2 = styled(CardItem)`
  background-color: green;
`

3番目のIアイテムについては、上記のすべてのスタイルを拡張し、 button を拡張したいhtml要素。

これは私がそれをやった方法です...

Card3 = Card2.withComponent('button').extend`
  pointer-events: none;
`

しかし、これは <span>There is content</span> としてレンダリングされたカード2を取得しますしかし、カード3は単なる空です `コンテンツはありません

私は withComponent を理解していますタグ(idk)のみを置き換えますが、これをどのように達成できますか?

回答 1 件
  • これを機能させるためのいくつかのこと:

    最初、Styled ComponentsはCSSをCSSクラスに変換し、それらのクラスを className を介してReactコンポーネントにアタッチします  小道具。つまり、スタイルが実際に適用されるためには、 className を確認する必要があります。  小道具が処理されています。現在、Cardコンポーネントはそれを行っていません。

    あなたは <Card> が欲しい   className を受け入れる  小道具:

    const Card = ({className}) => <span className={className}>There is content</span>
    
    

    それは CardItem を許可します  および Card2  意図したとおりに表示します。

    第二Card3 の場合 、 withComponent  タグを置き換えるのではなく、コンポーネント全体を置き換えます。このため、 Card の全体   Card 内のテキストを含むボタンと交換されます 。それでもそのテキストが必要な場合は、2つの解決策があります。

    子を Card3 に渡すことができます :

    return <Card3>There is content</Card3>
    
    

    または、タグ名の小道具を元の Card に追加できます :

    const Card = (props) => {
      const Tag = props.tag || 'span'
      return <Tag className={props.className}>There is content</Tag>
    }
    const ButtonCard = props => <Card {...props} tag="button" />
    const Card3 = Card2.withComponent(ButtonCard).extend`
      pointer-events: none;
    `
    
    

あなたの答え