我正在使用React 17.0.2。
我有一些代码:
import React from "react";
import logo from "./white_lotus.jpeg";
import "./test.css";
function Header() {
return (
<div className="header">
<div className="header-left">
<div className="header-logo-link">
<img
className="header-logo"
src={logo}
alt=""
/>
</div>
</div>
</div>
);
}
export default Header;
.header {
display: flex;
align-items: center;
height: 60px;
position: sticky;
top: 0;
z-index: 100;
background-color: white;
border-bottom: 1px solid lightgray;
}
.header-left{
margin-left: 2%;
justify-content: space-between;
display: flex;
width: 50px;
height: inherit;
align-items: center;
background-color: red ;
}
.header-logo {
height: 20px;
}
当在两个不同的文件中渲染时,会产生不同的输出。在一个文件中,它产生了这样的输出:
其中logo和关联的div被拉伸。我在 App
文件本身中渲染了这个:
function App() {
return (
<div className="app">
<Header />
</div>
);
}
export default App;
当我尝试在新 create-react-app
中尝试时,它渲染得非常好:
我不知道为什么这是这样。是否有任何缓存会影响一个应用程序和另一个应用程序之间的渲染?
1条答案
按热度按时间hiz5n14c1#
我相信这是因为在我的第一个应用中,我也有一些导入其他函数组件的操作;当我删除这些导入时,它渲染得很好。
然而,我从未在实际代码中使用过这些函数组件。它们是如何仍然影响渲染的呢?