Question

在我的web react项目中，我有两个类“菜单”返回我的仪表板的菜单（更改页面“首页”，“消息” ...的链接）和另一个“框”以显示页面（这是我的网站页面的容器），所以我的问题是当我单击按钮时页面如何。


 class menu(){
        render(){
           return(<button>click to go to home</button>) ;
        }
   
   }
   
   class box(){
       render (){
          return(<Home>this is  the home</Home>) ; 
       }  }

Answer 1

您可以创建一个具有page属性和setPage方法的父组件。

在该组件内部，渲染工具栏和页面。工具栏应接受一个名为onClickPage的道具，该道具应调度setPage。例如：

const [page, setPage] = React.useState("dashboard");


....

<Toolbar onClickPage={page => setPage(page)} />
<Pages page={page} />

这就是所谓的提升状态（https://reactjs.org/docs/lifting-state-up.html），建议您阅读他们的文档。非常适合初学者。

Answer 2

如果主要问题是在页面之间导航，则可以使用react-router轻松实现。 https://reactrouter.com

将事件发送到另一个班级

2 个答案: