从Next.js中的页面更新嵌套布局中的 prop 13

ztmd8pv5 于 11个月前发布在其他

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

我正在尝试更新在嵌套布局中找到的页面标题。

app/docs/layout.tsx：

export const DocsLayout = ({children}:{children: React.ReactNode}) => {
   return (
      <>
         <header>
             <h2>Documentation - {/* platform goes here */}</h2>
         </header>

         <div>{children}</div>
      </>
   )
}

字符串

app/docs/Linux/page.tsx：

export const Linux = () => {
   const PAGE_TITLE = "Linux";

   return (
      <div>Linux content</div>
   )
}

型

app/docs/macos/page.tsx：

export const MacOs = () => {
   const PAGE_TITLE = "MacOS";

   return (
      <div>MacOS content</div>
   )
}

型
我不知道如何将PAGE_TITLE从子页面传递到layout.tsx中的头部，所以我最终使用URL路径名来检查每个页面并相应地更新h2。

app/docs/layout.tsx：

export const DocsLayout = ({children}:{children: React.ReactNode}) => {
   const pathname = usePathname();
   const [platform, setPlatform] = useState("Linux");

   if (pathname === "/docs/linux") {
      setPlatform("Linux");
   }
   else if (pathname === "/docs/macos") {
      setPlatform("MacOS");
   }

   return (
      <>
         <header>
             <h2>Documentation - {platform}</h2>
         </header>

         <div>{children}</div>
      </>
   )
}

型
我知道这不是理想的方法。有人能帮我用“正确”的方法解决这个问题吗？

next.js

来源：https://stackoverflow.com/questions/77674026/updating-a-prop-in-nested-layout-from-a-page-in-next-js-13

1条答案

按热度按时间

mspsb9vt1#

你可以使用React Context。这将给你给予更多的灵活性，避免依赖URL路径名。
定义一个保存当前页面标题的新上下文。修改DocsLayout组件以提供上下文值。然后更新要使用的子页面并设置上下文值。

创建页面标题上下文：

// Create a new file, e.g., PageTitleContext.js
import React from 'react';

export const PageTitleContext = React.createContext({
  pageTitle: '', // Initial value
  setPageTitle: () => {} // Placeholder function
});

字符串

更新DocsLayout以提供上下文：

// app/docs/layout.tsx
import React, { useState } from 'react';
import { PageTitleContext } from './PageTitleContext'; // Import the context

export const DocsLayout = ({children}:{children: React.ReactNode}) => {
  const [pageTitle, setPageTitle] = useState('');

  return (
    <PageTitleContext.Provider value={{ pageTitle, setPageTitle }}>
      <header>
        <h2>Documentation - {pageTitle}</h2>
      </header>
      <div>{children}</div>
    </PageTitleContext.Provider>
  );
};

型

子页面中的连接上下文：

// app/docs/linux/page.tsx
import React, { useContext, useEffect } from 'react';
import { PageTitleContext } from '../PageTitleContext'; // Import the context

export const Linux = () => {
  const { setPageTitle } = useContext(PageTitleContext);

  useEffect(() => {
    setPageTitle("Linux");
  }, [setPageTitle]);

  return (
    <div>Linux content</div>
  );
};

// Similar changes will be made in app/docs/macos/page.tsx

型

赞(0）回复(0）举报 11个月前

我来回答

从Next.js中的页面更新嵌套布局中的 prop 13

1条答案

相关问题

热门标签

最新问答