时间戳

首页 > 解决方案 > 将道具从页面传递到不同文件中的组件

javascript - 将道具从页面传递到不同文件中的组件

问题描述

我正在使用 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>
       ...
    </>
  );
}

然后将getHeroContentprop 直接设置为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;

标签： javascriptreactjsnext.js

解决方案

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

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

推荐阅读