reactjs 页脚导致React应用程序未加载

hts6caw3  于 2022-12-22  发布在  React
关注(0)|答案(1)|浏览(154)
import React from 'react';
// import './Footer.css';
export default function Footer() {
  return (
    <Footer>
        {/* <p href= ''><i class='fa-brands fa-square-github' ></i></p> */}
        <p href='https://github.com/Zac0088'><i class='fa-brands fa-linkedin' ></i></p>
        <p href='https://github.com/Zac0088'><i class='fa-brands fa-discord' ></i></p>

    </Footer>
  );
}

我试图启动我的react应用程序,当我做NPM启动应用程序编译,但chrome不会加载应用程序,只是给我错误代码:内存不足。当我从文件夹容器中删除页脚标签时,它与页脚有关,但我得到了上面的错误。

import React, { useState } from 'react';
import NavTabs from './NavTabs';
import Home from './pages/Home';
import Projects from './pages/Projects'
// import About from './pages/Home';
import Resume from './pages/Resume';
import Contact from './pages/Contact';
import Footer from './Footer';
export default function PortfolioContainer() {
  const [currentPage, setCurrentPage] = useState('Home');

  // This method is checking to see what the value of `currentPage` is. Depending on the value of currentPage, we return the corresponding component to render.
  const renderPage = () => {
    if (currentPage === 'Home') {
      return <Home />;
    }
    if (currentPage === 'Projects') {
      return <Projects />;
    }
    if (currentPage === 'Resume') {
      return <Resume />;
    }
    return <Contact />;
  };

  const handlePageChange = (page) => setCurrentPage(page);

  return (
    <div>
      <div className="portfolio-container">
      {/* We are passing the currentPage from state and the function to update it */}
      <NavTabs currentPage={currentPage} handlePageChange={handlePageChange} />
      {/* Here we are calling the renderPage method which will return a component  */}
      {renderPage()}
    </div>
    <Footer />
    </div>
  );
}
x0fgdtte

x0fgdtte1#

您正在调用函数Footer本身,从而导致无限循环。
当Footer组件呈现时,您返回的是<Footer>,这实际上是同一个函数,它会导致Footer一遍又一遍地呈现自己,直到浏览器耗尽存储所有这些内容的空间。
您可能希望使用<footer> HTML元素。

相关问题