我使用导航栏作为根文件,我有3个页面(Profile、About和Home),我想从页面获取数据到根文件,例如(TITLE="Profile"),因为我想在导航栏中显示标题.

我的导航栏页面如下所示

import React from "react";

function app(){
return(
<div className="topnav">
          <a
            style={{
              fontWeight: "bold",
              fontSize: "20px",
              position: "absolute",
              margin: "10px",
              color: "#001b2b",
            }}
          >
            {title}
          </a>
<Link exact to="/profile">profile</Link>
<Link exact to="/home">Home</Link>
<Link exact to="/about">About</Link>

</div>
)}

如果我点击配置文件,我想设置标题="配置文件"

我坚持从子组件获取数据

推荐答案

因为这只是一个标题,而不是将值从子对象发送到父对象,当您单击导航栏上的任何菜单并刷新状态时,您只需设置一个会话变量PageTitle即可. 如果您在配置文件页面中,请按如下方式设置会话变量

import { ReactSession }  from 'react-client-session';
ReactSession.set("PageTitle", "Profile");

在根文件中,可以获得如下所示的会话变量,

this.title = ReactSession.get("PageTitle");  // This will Return "Profile"

Reactjs相关问答推荐

如何在重新图表中更改悬停时的条形填充 colored颜色 ?

React,React Router,Joy UI:如何在导航离开和返回后禁用snackbar重新出现?

在Map()完成React.js中的多个垃圾API请求后执行函数

React Router:在没有手动页面刷新的情况下,路由不会更新内容

如何使用.Aggregate从多个集合中获取数据,包括使用Mongoose+NextJS的SUM值

试图从Amazon-Cogito-Identity-js模拟CogitoUser.authateUser,并将其获取为未定义的S

根据用户 Select 的注册类型更改表单字段

在react上隐藏源映射

PWA:注册事件侦听器不会被触发

useEffect 和 ReactStrictMode

Redux 工具包不更新状态

ReactJS 中的图像加载顺序

获取更多数据后更新 DOM,而不刷新 React.js 中的页面

如何在 React 过滤器中包含价格过滤器逻辑?

如何测试使用 React.createportal 呈现的组件?

导入样式化组件时未导入组件内容

使用 React Router v6 监听来自不同组件的组件状态变化

当页面重新加载react 路由导航到第一页 v6

如何在组件文件夹内的react 组件文件中导入外部css文件?

为什么 Catch 语句不起作用 React Js (Firebase Auth)?