为选定页面导出带有道具的导航栏答案

【问题标题】：Exporting a NavBar with props for selected page为选定页面导出带有道具的导航栏
【发布时间】：2020-08-01 23:38:10
【问题描述】：

我正在将导航栏导出到 navigation.js，但我也想导出选定的 pageLink 这样navigation.js 就知道要渲染哪个页面。但是，无论我尝试什么，我都做不到。这似乎是一件微不足道的事情，但 reactJS 施加了最奇怪的限制......

...你会想，如果这是任何其他环境，那么在导入组件后，你将可以访问该组件中的任何内容，但不能在 reactJS 中访问！

如何将此参数与导航栏本身一起传递给导航组件？

导航条码：

case "Tile7":
       console.log("SetAllTileStyles [" + eventTileName + "] for [" + eventAction + "]");
      divToChange = document.getElementById('Tile5');
      divToChange.style.backgroundColor = 'blue';
      divToChange.style.fontFamily = 'londrinaBookRegular';
      divToChange.style.color = 'yellow';

       // set remaining tiles to default
       SetDivToDefault("Tile1", eventAction);
       SetDivToDefault("Tile2", eventAction);
       SetDivToDefault("Tile3", eventAction);
       SetDivToDefault("Tile4", eventAction); 
       SetDivToDefault("Tile5", eventAction); 
       SetDivToDefault("Tile6", eventAction); 
       
       // Navigate to the appropriate page
       setPageLink("Engage");
 break; // end of Case Tile7 

return (
        ... divs for Tiles 1-6...

        <div
          id="Tile7"
          className="linkcontainer"
          onClick={HandleClick}
          onMouseEnter={e => HandleMouseEnter(e)}
          onMouseLeave={e => HandleMouseLeave(e)}
         >Engage
        </div> 
     ) // end Return

export default Navbar;

【问题讨论】：

请提供Minimal, Complete, and Reproducible 代码示例。还请包括它的使用位置和方式、关于未按预期工作的更清晰的详细信息，以及实际和预期的结果应该是什么。

标签： reactjs import navigation export

【解决方案1】：

如果您可以提供 CodeSandbox 链接，那将非常有帮助。虽然我猜您是在尝试将数据从子组件传回父组件。

setPageLink 函数，而不是在我假设是子组件的 Navbar 组件中定义，您可以在父组件中定义它并将其作为 props 传递给此 Navbar 组件。

总结一下

function Parent(props) {
  const [link, setPageLink] = useState('Engage');
  return <Child setPageLink={setPageLink}/>;
}

function Child({setPageLink}) {
   // use setPageLink from props like this setPageLink("Hi");
   // ... your child component
}

【讨论】：

【解决方案2】：

我尝试使用 props 方法，但在将 state 常量导入 Navigation.js 时遇到了 State 非法问题。

我几乎是这样绕过它的：

export default Navbar
export const pageToDisplay  = pageLink; 
// where pageLink is just a simple constant (no State)

import { Navbar, pageToDisplay } from "./Navbar.js";

所以它现在工作得更好，因为我得到了默认页面“主页”。

但是，当我单击导航栏时，它会运行 HandleClick 代码，但不会强制重新导出更新后的 pageLink，尽管它必须导出某些内容，因为导航栏中的颜色会发生变化！

我不知道如何解决这个问题！我很确定我不能在子函数中添加导出语句...

如果我在页面名称中使用大写字母（如在“主页”中）并且如果在开头使用小写字母（如在“主页”中），我也会收到相互矛盾的错误消息...

我所指的“组件”不是函数——它们是 src/components 中的单独文件。我还能将 Props 传递给这些文件吗？我想我已经在使用 export 和 import 语句做到这一点......

非常感谢您不厌其烦地回复。我真的很感激:-)

【讨论】：

import Navbar, { pageLink } from "./Navbar.js"; 也可以，而且更简洁干练。您是打算回答自己的问题（并提出更多问题）还是打算更新您当前的问题？
我以为我已经解决了这个问题，但正如你所说，我最终更新了当前问题。这里的问题是点击事件是由 div 代码驱动的：
HandleMouseEnter(e)} onMouseLeave={e = > HandleMouseLeave(e)} >Engage
>
由导航栏组件模块生成，包含 HandleClick 功能。

这个函数改变了点击的磁贴的颜色和字体，但是，因为它是一个子函数，它不能强制将选中的磁贴导出到导航模块，除非我能弄清楚如何生成一个以某种方式有条件的导出......

【解决方案3】：

填充反应孔...

我现在在我的单页网站中有一个工作导航栏，它不需要 react-router，并且导航栏不必位于路由器代码通常所在的 index.js 文件中。

本应用不使用路由器，而是使用导出功能导出用户选择的页面名称。

通常，当用户单击导航栏磁贴时，HandleClick 函数不会生成导出，并且什么也不会发生。

为了解决这个问题，我将所需页面保存在 cookie (npm sfCookies) 中，然后运行强制导出的 javascript pageRefresh 函数。

在导出语句中，我从 cookie 中读取了所需的页面。

export default Navbar;
export const pageToInclude = read_cookie('savedpage');

Navbar 导出到 Header，该 Header 组装所有 Header 组件，包括 Navbar，并导出到 pageAssembly 模块，该模块附加所需的页面和子页面部分。

您也可以通过将页面名称保存在数据库中来实现此目的。

您需要将其永久保存在某个地方，因为 refreshPage 会从缓存中重新加载页面，这会清除您设置的所有变量。

您也不能使用状态常量，因为当您更新 pageName 时，它将在下一次渲染之前生效，并且当 refreshPage 运行时，该渲染不会发生。

这样，只需几行代码，你就可以在任何你想要的地方拥有你的导航栏，你根本不需要 react-router。

:-)

【讨论】：