リアクションコンポーネントの小道具でスタイリッシュコンポーネントを使用する

Question

私はリアクションjsプロジェクトでスタイリッシュなコンポーネントを使用しています。 私のスタイリッシュなコンポーネントimgを構築するときに、コンポーネントが取得する小道具にバックグラウンドを依存させたい。 私は機能コンポーネントを構築していた場合、私はちょうど使用：コンポーネント内

const FramedImage = styled.img` 
    background-size: cover; 
    background: URL(${props.imageUrl}); 
    background-position: center center; 
    background-repeat: no-repeat;`; 

、それが動作します。 でもクラスコンポーネントでどのように達成できますか？クラス自体の中にconst varを宣言することはできないので、その外にはありません。this.props

ありがとう！

Answer 1

小道具にアクセスするには、コンポーネントの有効範囲外で定義すると、関数に渡す必要があります。だからあなたの場合：CSSテンプレート内の関数に遭遇styled-components

const FramedImage = styled.img` 
    background-size: cover; 
    background: URL(${props => props.imageUrl}); //use a function here instead 
    background-position: center center; 
    background-repeat: no-repeat; 
`; 

は、それがコンポーネントに割り当てられ小道具でそれを呼び出します。

これはですが覚えているがFramedImageコンポーネントに割り当てられた小道具を指し、あなたはそれが親コンポーネントですから小道具に渡したい場合は、次のようなそれらを広めるために必要があります。

class Parent extends React.Component { 
    render() { 
    return <FramedImage {...this.props} 
    } 
}