next.js 为什么React渲染两次，即使react严格模式关闭

knpiaxh1 于 2023-05-17 发布在 React

关注(0)|答案(1)|浏览(296)

我的代码中没有错误，不知道为什么React渲染这个组件两次。
这是我的问题的图像。

Index.js页面：

import LandingPage from '../components/Home/LandingPage.jsx'
import Layout from './../components/Layout';

export default function Home() {
  return (    
    <Layout section={<LandingPage/>}></Layout>
      
    )
}

我的Layout.js页面

import React from 'react'
import Head from 'next/head'
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';

export default function Layout({ section, children, title,description }) {
  return (
      <>
          <Head>
          <title>{ title? title   :'create next app' }</title>
                <meta name="description" content={description} />
                <link rel="icon" href="https://cdn.logo.com/hotlink-ok/logo-social.png" />
             </Head>
          <div className=' flex min-h-screen flex-col justify-between bg-gray-50'>
              <header className='sticky top-0 z-50 bg-white'>              
                <nav >
                   <Navbar/>
                </nav>
        </header>   
        <section>
          {section}
        </section>
              <main className='container mx-auto  px-4'>
                  {children}                  
              </main>
              <footer>
                 <Footer/>
              </footer>
             
          </div>
      
      </>
  )
}

LandingPage.jsx ``

import React from 'react'

export default function LandingPage() {
  return (<><div className='Image-landing-page'>
        <h1 className="  text-xl  font-bold   sm:mt-0   leading-8 md:font-extrabold tracking-tight text-white sm:text-3xl  text-center  "> Hello world </h1>
      </div></>

css：

.Image-landing-page{
    background-image: url('https://i.pinimg.com/564x/bd/ac/32/bdac327b05ddaa05216dfa08c9e734c3.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    padding-top:10%;
    margin:0!important;
    padding-bottom:30%;
    font-size: 22px;
}

我还尝试在next.config.js中关闭React严格模式，因为我正在为我的项目使用Next js，这个问题仍然存在。

next.js

来源：https://stackoverflow.com/questions/76208657/why-react-renders-twice-even-if-the-react-strict-mode-is-off

1条答案

按热度按时间

a14dhokn1#

你没有正确地实现它，只是：
修改index.js文件如下：

import LandingPage from '../components/Home/LandingPage.jsx'
import Layout from './../components/Layout';

export default function Home() {
  return (    
    <Layout>
           <LandingPage/>
    </Layout>
      
    )
}

然后在Layout.js中如下所示：

import React from 'react'
import Head from 'next/head'
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';

export default function Layout({  children, title,description }) {
  return (
      <>
          <Head>
          <title>{ title? title   :'create next app' }</title>
                <meta name="description" content={description} />
                <link rel="icon" href="https://cdn.logo.com/hotlink-ok/logo-social.png" />
             </Head>
          <div className=' flex min-h-screen flex-col justify-between bg-gray-50'>
              <header className='sticky top-0 z-50 bg-white'>              
                <nav >
                   <Navbar/>
                </nav>
        </header>   
        
              <main className='container mx-auto  px-4'>
                  {children}                  
              </main>
              <footer>
                 <Footer/>
              </footer>
             
          </div>
      
      </>
  )
}

赞(0）回复(0）举报 2023-05-17

我来回答

next.js 为什么React渲染两次，即使react严格模式关闭

1条答案

相关问题

热门标签

最新问答