在 ES6 中重新声明标识符

Question

很可能是一个愚蠢的问题，但是有没有办法用相同的标识符重新声明一个变量？为了命名约定，我想做一些类似于以下的事情。

export let Navbar = styled(Navbar)` STYLES GO HERE `

但是，由于范围的原因，我无法向 Navbar 添加样式并将标识符保留为 Navbar。导航栏已声明。

有什么想法吗？我们正在尝试用样式包装我们的组件，但保持它们的名称相同。

例如，这可行，但打破了我们用于常规 html 元素的约定。

export let StyledNavbar = styled(Navbar)` STYLES GO HERE `

Answer 1

也许尝试使用组合？

const StyledNavbar = style.div`
    padding: 10px;
    background: blue;
    font-size: 12px;
`

export class Navbar extends React.Component {
    render() {
        return <StyledNavbar>Hello World</StyledNavbar>;
    }
}

Answer 2

也许您正在寻找

Navbar = styled(Navbar)` STYLES GO HERE `
export {Navbar}

?

您可以为变量分配一个新值（如果它是用 let 或 var 声明的并导出它。

你可以反过来做：

export let Navbar = initialValue;
Navbar = styled(Navbar)` STYLES GO HERE `

Answer 3

我不知道这是否最适合您的用例，但您可以使用别名

import {NavBar as StyledNav} from "./navBar;
const NavBar = styled(StyledNav)`YOUR CODE HERE`;

Answer 4

我认为以下应该可行：

const StyledNavbar = styled(Navbar);
export { StyledNavbar as Navbar };

在 ES6 中重新声明标识符

Re-declaring an identifier in ES6

reactjs

styled-components