导出包含所选页面道具的导航栏

Question

我正在将导航栏导出到navigation.js，但我也想导出选定的页面链接以便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.时遇到了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中的独立文件。我还能把道具传给这些文件吗？我想我已经在对进出口声明进行有效的处理了。。。

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

Answer 3

填充反应孔。。。

我现在在我的单页网站中有一个可用的Navbar，它不需要react路由器，而且Navbar不必在路由器代码通常所在的index.js文件中。

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

通常，当用户单击导航条磁贴时，HandleClick函数不会产生导出，也不会发生任何事情。

为了解决这个问题，我将所需的页面保存在cookie(npm-sfCookies(中，然后运行javascript页面刷新功能，强制导出。

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

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

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

您也可以通过将页面名称保存在数据库中来实现这一点。

您需要将其永久保存在某个位置，因为refreshPage会从缓存中重新加载页面，这将擦除您设置的任何变量。

您也不能使用状态常量，因为当您更新pageName时，它要到下一次渲染才会生效，而当refreshPage运行时，渲染也不会发生。

这样，它只需要几行代码，你可以把导航栏放在任何你想要的地方，你根本不需要反应路由器。

：-(