我的功能组件没有被渲染,首先我试图用 react-router 访问它,但目前我将它而不是 App 组件传递给 index.js 渲染函数。其他组件被渲染。如果您至少可以分享您的经验,那会很棒,可能是什么原因?
这个组件是问题所在,它没有被渲染:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
export default function MZsPopular() {
return (
<>
<Header><HeaderImg src="../../assets/headerpic.png"/><Navbar><span>mypage</span>| <span>log out</span></Navbar></Header>
<Content><SideBar/><RightFrame><Title>The story of Generation MZ<Subtitle>Popular</Subtitle></Title>
<Tables>
<Table>
<thead>
<tr>
<th>Group</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr><td><div></div></td><td>MZs general forum All time likes post 1</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td><div></div></td><td>MZs general forum All time likes post 2</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td><div></div></td><td>MZs general forum All time likes post 3</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td><div></div></td><td>MZs general forum All time likes post 4</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td><div></div></td><td>MZs general forum All time likes post 5</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
</tbody>
</Table>
<RightTable>
<thead><tr><th>Title</th></tr></thead>
<tbody><tr><td>ID</td><td>MZs Recent 3 days likes post. MZs Recent 3 days likes post. MZs Recent 3 days likes post. MZs Recent 3 days likes post. MZs Recent 3 days likes post. MZs Recent 3 days likes post.</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
</tbody></RightTable>
</Tables>
</RightFrame></Content>
</>
)
}
这个组件被渲染:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
export default function PoliticsWe() {
return (
<>
<Header><HeaderImg src="../../assets/headerpic.png"/><Navbar><span>mypage</span>| <span>log out</span></Navbar></Header>
<Content><SideBar/><RightFrame><Title>Politics<Subtitle>We Forum</Subtitle></Title>
<Tables>
<Table>
<thead>
<tr>
<th>Group</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr><td><div></div></td><td>Politics Our Forum 1 All time likes post. Politics Our Forum 1 All time likes post. Politics Our Forum 1 All time likes post. Politics Our Forum 1 All time likes post. Politics Our Forum 1 All time likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td><div></div></td><td>Politics Our Forum 2 All time likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td><div></div></td><td>Politics Our Forum 3 All time likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td><div></div></td><td>Politics Our Forum 4 All time likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td><div></div></td><td>Politics Our Forum 5 All time likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
</tbody>
</Table>
<RightTable>
<thead><tr><th>Title</th></tr></thead>
<tbody><tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
<tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr>
</tbody></RightTable>
</Tables>
</RightFrame></Content>
</>
)
}
答案 0 :(得分:0)
我发现我只是巧合地评论了组件的一部分,这就是它没有渲染的原因