Question

我要将导航栏导出到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;

Answer 1

如果您可以提供CodeSandbox链接，将会非常有帮助。尽管我猜您正在尝试将数据从子组件传递回父组件。

setPageLink函数无需在我假定为子组件的Navbar组件中定义，而是可以在父项中定义并将其作为道具传递给此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
}

Answer 2

我尝试使用props方法，但是在将状态常量导入Navigation.js时遇到了州违法问题。

我几乎是这样解决的：

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

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

因此，由于我得到默认页面“主页”，因此它现在工作得更好。

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

我不确定该如何解决！我很确定我不能在子函数中添加导出语句...

如果页面名使用大写字母-如“主页”，如果开头使用小写字母，如“ home”，我也会收到冲突的错误消息...

我所指的“组件”不是功能-它们是src / components中的单独文件。我仍然可以将道具传递给这些文件吗？我想我已经在export和import语句中这样做了……

非常感谢您尝试回答。我真的很感激：-）

Answer 3

填充反应孔...

我现在在我的单页网站上有一个正常工作的Navbar，它不需要react-router，并且NavBar不必位于路由器代码通常所在的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。

：-）

为选定页面导出带有道具的NavBar

3 个答案: