styled-component的定义位置

Question

问一个超级弱智的问题：这里的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;
`;

Answer 1

Nolan 2021-01-31 13:21:24

Hi, 这个问题挺好的

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

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

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

• 提问者 津白 #1

  谢谢解答！原来是我对于函数的定义和运行有误解

• 薛清扬 #2

  老师，那当组件加载是不是就要执行Unauthenticated函数，执行这个函数怎么访问到后面的ShadowCard呢

• Nolan 回复 薛清扬 #3

  把我上面例子中的第2行取消注释移到最后一行，就是你说的场景了。你回发现移到最后一行就不报错，是因为执行是在定义之后

点开查看后面1条评论