styled-component的定义位置

来源：6-4 最受欢迎的CSS-in-JS方案 - Emotion的安装与使用

津白

2021-01-31

问一个超级弱智的问题：这里的ShadowCard不是用const在组件后面定义的吗？为什么可以在定义之前的位置里被使用呢？是不是我对ts或者webpack有什么误解？

export default function UnauthenticatedApp() {
  const [isRegiestered, setIsRegistered] = useState(false);
  return (
    <Container>
      <ShadowCard>
        {isRegiestered ? <LoginScreen /> : <RegisterScreen />}
        <button onClick={() => setIsRegistered(!isRegiestered)}>
          切换到{isRegiestered ? "注册" : "登录"}
        </button>
      </ShadowCard>
    </Container>
  );
}

const ShadowCard = styled(Card)`
  width: 40rem;
  min-height: 56rem;
  padding: 3.2rem 4rem;
  border-radius: 0.3rem;
  box-sizing: border-box;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px;
  text-align: center;
`;

写回答

1回答

Nolan

2021-01-31

已采纳

Hi, 这个问题挺好的

把这段代码粘贴到你的项目中运行试一下，理解了这段代码就理解了这个问题：

const test = () => a
test() // 如果没有这一句，不会报错；如果有这一句，会报错；为什么呢？
const a = 1;

注释里的问题的答案是：由于 test 函数没有被调用，所以第一行并没有 '使用' a 变量；而在第二行调用了test函数，真正使用到了a变量，就会报错了

薛清扬

Nolan

喔喔,明白了.谢谢Nolan老师的解答

2021-02-19

共4条回复

React17+Hook+TS4 优质实践，仿 Jira 企业级项目

解锁 React17 高阶用法，轻松应对大型复杂长周期项目

2691 学习 · 1236 问题

查看课程

相似问题

关于style-component的问题

回答 1

emotion 和 styled-component 对比？

回答 1

指定后，css还是报错，我看过问答区，改成问答区里面的指定依旧报错

回答 1

怎么全局引入styled呢？

回答 1

每次写antd组件都提示类型定义

回答 1

打开慕课网App查看更多内容