时间戳

首页 > 解决方案 > 如何将页面标题传递给菜单（如面包屑）

reactjs - 如何将页面标题传递给菜单（如面包屑）

问题描述

我正在尝试为应用程序开发移动视图。我的页脚组件上有菜单，我有页眉组件、页面和子页面（组件）。

  import React from 'react' 
    import {Link} from Gatsby
    export default Nav =() => {
         const menu = [
    {
       url: '/',
       title: 'Home', 
     },
     {
      url: '/about'
      title: 'About'
     },
      {
      url: '/contact'
      title: 'Contact'
     },
      
    ]
    return (
           <ul>
{menu.map(item => {
     <li>
<Link to="{item.title}">{item.title}</Link>
</li>
})}
</ul>
)
    }

对于我的标题 ，我有一个组件来显示内容，但我想在标题菜单上传递单击的菜单标题（完全是另一个组件）。我想知道该怎么做。

标签： reactjs

解决方案

您可以使用的状态道具<Link />

这是一个例子：

const PhotoFeedItem = ({ id }) => (
  <div>
    {/* (skip the feed item markup for brevity) */}
    <Link
      to={`/photos/${id}`}
      state={{ fromFeed: true }}
    >
      View Photo
    </Link>
  </div>
)

const Photo = ({ location, photoId }) => {
  if (location.state.fromFeed) {
    return <FromFeedPhoto id={photoId} />
  } else {
    return <Photo id={photoId} />
  }
}

或者您可以使用导航功能来完成。

推荐阅读