嵌套对象解构：重复声明 "fontSize"

Question

我正在使用 ShevyJS with styled-components. The docs show an example that uses nested object deconstruction ...

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

和我的风格...

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

它工作正常。但是，如果我尝试执行以下操作，则会出现错误 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 知道哪个 fontSize 使用。这当然是有道理的，但我非常怀疑它是如何工作的。

有什么想法吗？

Answer 1

你的解构语句基本上等同于

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

这显然是无效的。如果你想解构它们，你需要将它们分配给不同的变量。

I assumed the fontSize within the p would be scoped to p and the h1 to h1 so that styled.p knows which fontSize to use.

不，没有这样的作用域，它与嵌套对象没有任何关系。解构目标中的所有变量都在同一范围内声明 - 它们只是普通的 const 变量，没有任何附加的名称空间。

记住 styled.p 只是一个模板标签，它对变量名一无所知，也不会以任何方式影响它们。在将结果 values 传递到标记函数之前，模板的插值部分中的表达式会照常计算。

如果你想做一些命名空间，你需要自己明确地做：

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};
/*               ^ */
`;

嵌套对象解构：重复声明 "fontSize"

Nested object destructuring: Duplicate declaration "fontSize"

javascript

ecmascript-6

styled-components