Question

我正在使用 NextJS 并试图习惯它。
我有一个 index.js 页面，因为我有 6 个组件，我从 pages 文件之外的文件中导入它们.
我的主要问题是这是最佳实践吗？这对开发工作正常，但是生产呢？我应该为此切换到 ContextAPI 吗？哪个对性能和 SEO 更好？

文件结构；

/pages
  -index.js
   ...
...
/components
  -Hero.js
  ...

我已经查询了我的数据库以获取英雄部分的内容并将其作为道具传递给页面中的 index.js，如下所示；

export const getStaticProps = async () => {
  const { db } = await connectToDatabase();

  const getPagesFromDB = await db.collection('pages').find({}).toArray();
  const getPages = await JSON.parse(JSON.stringify(getPagesFromDB));

  const getHeroContent = getPages.filter((data) => data.section === 'hero');

  return {
    props: {
      getHeroContent,
    },
    revalidate: 1,
  };
};

export default function Home({ getHeroContent }) {
   
  console.log(getHeroContent);

  
  return (
    <>
      <Hero getHeroContent={getHeroContent}></Hero>
       ...
    </>
  );
}

然后确实将 getHeroContent 属性直接设置为 Hero.js 组件中的反应状态，如下所示；

const Hero = ({ getHeroContent }) => {
  const classes = useStyles(); 
  const [heroTitle, setHeroTitle] = useState(getHeroContent.title);
  const [heroImg, setHeroImg] = useState(getHeroContent[0].image[0].secure_url);
 

 
  
  return (
    <Box component='div' className={classes.root}>
      <div className={classes.hero}>
        <div className={classes.imgWrapper}>
          <Image
            src={heroImg}
            className={classes.img}
             
            layout='fill'
            objectFit='cover'
          ></Image>
        </div>
        <div className={classes.heroTypos}>
          <Typography variant='h2' className={classes.Typo1}>
            {heroTitle}
          </Typography>
          <Typography variant='h5' className={classes.Typo2}>
            <Link href='#!'>
              <a className={classes.Typo2Link}>
                Shop Now &nbsp;
                <ArrowForwardIosIcon className={classes.Typo2Icon} />
              </a>
            </Link>
          </Typography>
        </div>
      </div>
    </Box>
  );
};

export default Hero;

Answer 1

在项目的根目录中有一个组件文件夹并将组件导入您的页面是使用 NextJS 的一种非常典型的处理方式。

我认为在这种情况下切换到 ContextAPI 没有明显的好处。也许如果您需要将值非常深入地传递给许多组件。这更多是个人喜好的问题。但请记住，当上下文值发生变化时，所有上下文使用者都会重新呈现，这可能会导致较大应用出现性能问题。

将道具从页面传递到一个组件，它在不同的文件中

1 个答案: