Блог

Главная - Вопросы по программированию - Передача данных с динамической страницы в постоянный компонент {дочерние элементы} в Next.js

Передача данных с динамической страницы в постоянный компонент {дочерние элементы} в Next.js

#javascript #reactjs #next.js

Вопрос:

Я хочу использовать постоянную компоновку в Next.js и передайте ему некоторые данные с моей страницы динамического сообщения в блоге. введите описание изображения здесь

Так, например, имея этот код (от next.js документация):

 // pages/posts/[id].js

function Post({ post }) {
  return <p>{post.title}</p>;
}

// Trying to export the post title here
export const postTitle = ({ post }) => {
  return post.title;
};

export async function getStaticPaths() {
  // Call an external API endpoint to get posts
  const res = await fetch("https://.../posts");
  const posts = await res.json();

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }));

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false };
}

// This also gets called at build time
export async function getStaticProps({ params }) {
  // params contains the post `id`.
  // If the route is like /posts/1, then params.id is 1
  const res = await fetch(`https://.../posts/${params.id}`);
  const post = await res.json();

  // Pass post data to the page via props
  return { props: { post } };
}

export default Post;

Как я могу захватить этот {post.title} и использовать его в моем постоянном компоненте макета, например:

 // SiteLayout.js

import React from "react";
import { postTitle } from "../../pages/posts/[id]";

// Main Page  Wrapper
const SiteLayout = ({ children }) => {
  return (
    <>
      {postTitle amp;amp; <p>{postTitle}</p>}
      <main className="layout">{children}</main>
    </>
  );
};

export default SiteLayout;

Я потратил часы, пытаясь заставить это работать, так что я был бы очень признателен за любые указания! Спасибо!

Комментарии:

1. nextjs.org/docs/basic-features/layouts#per-page-layouts имеет шаблон, позволяющий считывать реквизиты страницы в компоненте макета. Это помогает?

2. @AKX с помощью этого я смогу передать реквизиты в макет с помощью функции getLayout? (Редактировать ->) Похоже, что это правильный способ сделать, опробую его и опубликую обновление здесь. Спасибо!

3. Это сработало, большое вам спасибо @AKX

Ответ №1:

 const Page = ({title, posts}) => {
  return <Layout title={title}>
    // include posts here with something like <Post/>
  </Layout>
}

...

export const getStaticProps = async () => {
  // pass title and posts to page
}

Вы должны передать заголовок на страницу, а затем включить макет, а затем включить записи в качестве дочерних элементов макета.

Комментарии:

1. Не приведет ли это к повторному отображению макета каждый раз, когда я перемещаюсь по ссылкам «макеты»?

2. Я не уверен, что вы имеете в виду под «ссылкой на макеты», но getStaticProps она вызывается только один раз при создании страницы (или регенерации с повторной проверкой). Он будет перенаправлять данные на стороне клиента, но именно так работает react, он не будет перенаправлять их, если в этом нет необходимости (например, обновление состояния).

Метки: