ネストされたオブジェクトのデストラクション：重複宣言 "fontSize"

Question

私はをスタイリッシュなコンポーネントで使用しています。ドキュメントは、それが正常に動作します

const Heading = styled.h1` 
    font-size: ${fontSize}; 
    line-height: ${lineHeight}; 
    margin-bottom: ${marginBottom}; 
`; 

... nested object deconstruction ...

const shevy = new Shevy() 
const { 
    baseSpacing: bs, 
    h1: { 
    fontSize, 
    lineHeight, 
    marginBottom 
    } 
} = shevy 

と私のスタイルを使用する例を示しました。私は次の手順を実行しようとした場合でも、私は前にこのようにネストされたオブジェクトで働いたことがありませんエラーModule build failed: Duplicate declaration "fontSize" ...

const shevy = new Shevy() 
const { 
    baseSpacing: bs, 
    h1: { 
    fontSize, 
    lineHeight, 
    marginBottom 
    }, 
    p: { 
    fontSize 
    } 
} = shevy 

const Heading = styled.h1` 
    font-size: ${fontSize}; 
    line-height: ${lineHeight}; 
    margin-bottom: ${marginBottom}; 
`; 

const Byline = styled.p` 
    font-size: ${fontSize}; 
`; 

を取得します。 p内のfontSizeは、pとh1からh1にスコープされると考えられ、styled.pはどちらを使用するかを知っています。それは確かに意味をなさないだろうが、私はそれがどのように動作するのか非常に疑う。

アイデア？

Answer 1

あなたの非構造計算書は明らかに無効である

const fontSize = shevy.h1.fontSize, 
     fontSize = shevy.p.fontSize; 

と基本的に同じです。それらを分解するには、それらを異なる変数に割り当てる必要があります。

私はstyled.pを使用するfontSize知っているように、p内fontSizeがpとh1からh1にスコープされるだろうと想定。

いいえ、このようなスコープはありません。ネストされたオブジェクトとは関係ありません。破壊ターゲット内のすべての変数は同じスコープ内で宣言されています。通常はconstの変数で、名前空間が添付されています。

styled.pはテンプレートタグにすぎず、変数名については何も知らず、何らかの形で影響を与えることができます。テンプレートの補間セクション内の式は、結果がの値がタグ関数に渡される前に、通常通り評価されます。

あなたには、いくつかの名前空間をしたい場合は、明示的にそれを自分で行う必要があります。

const { 
    baseSpacing: bs, 
    h1: { 
    fontSize: h1Fontsize, 
//   ^^^^^^^^^^^^ 
    lineHeight, 
    marginBottom 
    }, 
    p: { 
    fontSize: pFontsize 
//   ^^^^^^^^^^^ 
    } 
} = new Shevy(); 

const Heading = styled.h1` 
    font-size: ${h1FontSize}; 
/*    ^^ */ 
    line-height: ${lineHeight}; 
    margin-bottom: ${marginBottom}; 
`; 

const Byline = styled.p` 
    font-size: ${pFontSize}; 
/*    ^*/ 
`;