首页 \ 问答 \ 嵌套对象解构:重复声明“fontSize”(Nested object destructuring: Duplicate declaration “fontSize”)

嵌套对象解构:重复声明“fontSize”(Nested object destructuring: Duplicate declaration “fontSize”)

我正在使用带有样式组件的ShevyJS 。 文档显示了一个使用嵌套对象解构的示例...

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};
`;

我之前从未使用过嵌套对象。 我假设pfontSize将限定为ph1h1以便styled.p知道要使用哪个fontSize 。 它肯定会有意义,但我非常怀疑它是如何工作的。

有任何想法吗?


I'm using 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

and my styles ...

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

It works fine. But, if I try to do the following I get an error 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};
`;

I've never worked with nested objects in this way before. 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. It would certainly make sense but I highly doubt that's how it works.

Any ideas?


原文:https://stackoverflow.com/questions/47262310
更新时间:2020-02-05 16:11

最满意答案

您的解构声明基本上等同于

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

这显然是无效的。 如果要对它们进行解构,则需要将它们分配给不同的变量。

我认为pfontSize将被限定为p并且h1h1以便styled.p知道使用哪个fontSize

不,没有这样的范围,它与嵌套对象没有任何关系。 解构目标中的所有变量都在同一范围内声明 - 它们只是普通的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};
/*               ^ */
`;

Your destructuring statement is basically equivalent to

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

which is obviously invalid. If you want to destructure them, you need to assign them to different variables.

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.

No, there is no such scoping, and it doesn't have anything to do with nested objects. All the variables in the destructuring target are declared in the same scope - and they are just normal const variables, nothing with a namespace attached or so.

Remember that styled.p is just a template tag, it does not know anything about variable names or could be able to affect them in any way. The expressions in the interpolation sections of the template are evaluated as usual, before their result values are passed into the tag function.

If you want to do some namespacing, you need to do it yourself explicitly:

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

相关问答

更多

对象解构:如何使用中间嵌套属性(object destructuring: how to use intermediate nested property)

我能想到的最接近的是: var { iWantThis, iWantThis: { andThis, andThisToo } } = x; 我以为我会使用let ,如果我使用的是ES6;) The closest I can come up with is: var { iWantThis, iWantThis: { andThis, andThisToo } } = x; Thought I'd use let instead, if I'm using ES6 ;)

解构 - 错误重复声明'小时'(destructuring - error duplicate declaration 'hour')

解构的语法(BTW破坏是错误的术语)是不同的。 您需要指定冒号之前匹配的键和冒号后声明的变量。 也许你想要: const { year: startYear, month: startMonth, day: startDay, hour: startHour, minutes: startMinute } = event.start_date_details; const { hour: endHour, minutes: endMinut ...

将嵌套对象解构为函数参数(Destructuring nested objects as function parameters)

你可以这样做: const myFunc = ({event: {target: {name}}}) => { console.log(name) } myFunc({event: {target: {name: 'fred'}}}) .as-console-wrapper { max-height: 100% !important; top: 0; } 这是另一个实现,两个参数都有,但第二个完全是optionnal: const myFunc = ( {name: n ...

对象解构(Object Destructuring)

您可以使用三元运算符一次定义doc all来测试条件。 如果需要删除undefined属性,则可以通过reduce删除它们。 const { _id, name, bio, birth_date, photos, instagram, gender, jobs, schools } = element const myPhotos = photos.map(({ id }) => id) const insta = !instagram ? undefined : (() => { const ...

Javascript Error:missing =解构声明(Javascript Error: missing = in destructuring declaration)

这不是一个标准的JavaScript错误。 它来自您的编辑器。 您必须为您的Emacs编辑器使用js2模式 (Javascript模式)。 这可能是for循环中缺少的等号。 例: for(i 0; i < arr.length;i++); /* missing = in destructuring declaration */ 但是,如果不查看您的代码,我们只能猜测。 This is not a standard javascript error. It's coming from your e ...

嵌套对象解构:重复声明“fontSize”(Nested object destructuring: Duplicate declaration “fontSize”)

您的解构声明基本上等同于 const fontSize = shevy.h1.fontSize, fontSize = shevy.p.fontSize; 这显然是无效的。 如果要对它们进行解构,则需要将它们分配给不同的变量。 我认为p的fontSize将被限定为p并且h1到h1以便styled.p知道使用哪个fontSize 。 不,没有这样的范围,它与嵌套对象没有任何关系。 解构目标中的所有变量都在同一范围内声明 - 它们只是普通的const变量,没有任何附加的命名空间。 请记住 ...

解构声明bug的值(Destructuring declaration bug with the value)

在初始化的解构声明中: let { items:w = "Gorilla" } = options; 语法意味着声明一个名为“w”的变量,其值应该被初始化为“options”引用的对象中名为“items”的属性的值,或者如果没有这样的属性则为字符串“Gorilla” 。 在您的情况下,然后,变量“w”被初始化为原始对象中“items”属性的值。 如果您不想从源对象获取值,则不要: let w = "Gorilla"; In the destructuring declaration with ...

嵌套对象解构[重复](Nested Object destructuring [duplicate])

const { user: { name: { first: firstName = 'firstName', last: lastName = 'lastName' } = {} } = {} } = data const { user: { name: { first: firstName = 'firstName', last: lastName = 'lastName' } = {} } = {} } = data

ES6解构对象中的三元条件(Ternary condition in ES6 destructuring object)

你不能直接。 你可以做: const {filters: {pageno}} = props; const realPageno = pageno ? pageno - 1 : 0; You cannot directly. You can do: const {filters: {pageno}} = props; const realPageno = pageno ? pageno - 1 : 0;

对象分配的嵌套解构(Nested Destructuring on Object Assignments)

对于嵌套级别,您可以重复相同的语法,如同对顶级进行解构: 根据您的评论编辑 我需要数组中的对象 let node = { ItemTitle: 'Title', ItemId: 5, Menu: {Item: [{ItemId: 579}]} } let { ItemId: id, // extract `node.ItemId` into a variable called `id` ItemTitle: title, // extract `n ...

相关文章

更多

最新问答

更多
  • 如何保护Solr只允许SELECT请求给用户并禁止其他任何东西?(How to secure Solr to allow SELECT request to only users and disallow anything else?)
  • XPath表达式无效/错误TFHpple SWIFT 1.2(XPath Expression not working/incorrect TFHpple SWIFT 1.2)
  • css3 3D变换不能平滑地制作动画(css3 3D transform doesn't animate smoothly)
  • 运行时错误'91'和Outlook.Application = <对象变量或没有设置块变量>?(Run-time error '91' & Outlook.Application = Object variable or With block variable not set?)
  • 慢的webservice问题(Slow webservice problem)
  • textview的不正确对齐方式(Improper alignment of a textview)
  • 在第一步“Hello World”中出现Java错误(Cannot run “Hello World” program in Eclipse)
  • 为什么十六进制地址是14个字符?(why the hex address is 14 character?)
  • 如何在Python中的不同类中使用变量?(How to use variable in different classes in Python?)
  • asp:GridView HYPERLINKFIELD - datanavigateurlformatstring中的asp代码(asp:GridView HYPERLINKFIELD - asp code inside datanavigateurlformatstring)
  • 关于adaboost算法(About adaboost algorithm)
  • 在Matlab上内置图像(Built in Images on Matlab)
  • java swing:输入键事件时焦点丢失(java swing: Focus lost on enter key event)
  • C#中的通用约束,T是相同的TSomethingElse,对吧?(Generic constraints in C#, T is the same TSomethingElse, right?)
  • 从mybatis中的光标获取数据(Fetching data from cursor in mybatis)
  • 在运行时从XML构建对象的最佳方法(Best way for building objects out of XMLs at runtime)
  • 在整个窗口中拉伸sf :: Sprite(Stretch sf::Sprite across entire window)
  • Selenium Node API Web驱动程序等待超时处理程序(Selenium Node API web driver wait timeout handler)
  • 函数使用并且是map的一部分(循环依赖?)(Function uses and is part of map (circular dependency?))
  • 是否可以在C ++ 14中使用可选模板参数创建类型元组?(Is possible to make a tuple of types with optional template parameters in C++14?)
  • PHP从窗帘后面打印/ f(PHP prints /f from behind the curtains)
  • JFrame的contentPane的LayoutManager(LayoutManager of JFrame's contentPane)
  • 用于Instagram Feed的图像滚动(Image Roll Overs for Instagram Feed)
  • 如何显示拉伸字体(双倍宽度/高度)?(How to display stretched font (double width/height)?)
  • 文件操作API在fileapi.h和stdio.h中的WP8差异?(WP8 differences between file manipulation APIs in fileapi.h and stdio.h?)
  • 保存失败后Rails没有回滚事务()(Rails not rolling back transaction after failed save())
  • jqgrid中的分页问题与数组数据(Pagination problem in jqgrid with array data)
  • 重定向时,通过其他页面上的URL调用javascript函数(Call javascript function through url on otherpage while Redirecting)
  • 如何使用InvokeCommandAction调用我的方法并传入参数?(How do I go about using InvokeCommandAction to call a method of mine and pass in parameters?)
  • Jquerymobile按钮仅显示页面的第一个外观(Jquerymobile buttons are shown only first apperance of the page)