从反应路由器中的 header 组件调用组件函数

Question

她是我的 index.js 文件，布局（header，middel-container，页脚）

<div>
  <Header />
  <div className="middle-container">
    <Route path="/hello" component={HelloWorldApp} />
    <Route exact path="/" component={Login} />
  </div>
  <Footer />
</div>

我有 Header、HelloWorldApp、登录名和页脚的单独文件。在我的 Header 组件上有登录按钮，如果我单击登录按钮，它将调用登录组件上的函数。

我该怎么做。（这不是 child、parent 组件，因此我可以将函数名称作为 props 传递。）

请帮帮我

Answer 1

从登录组件中的 react-router-dom 导入 {Link}。像**abc一样在“/”后面加一个Link。如果你想在登录组件中调用一个方法（这样它应该是一个 class 组件..）那么你应该尝试在你的 index.js 组件中添加登录组件的状态然后你可以通过将状态作为道具发送给它来调用登录无状态功能组件，这样您就可以获得所需的结果。下面是一个调用无状态功能组件的例子：

login({[your_state_as_props]})=> return([conclusion of your operations on props..]);

您可以在此处阅读更多内容 https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17 如果你想在两个完全独立的组件（HelloWorlApp 和 Login）之间传递数据，那么你可以......但它会完全弄乱你的所有程序。取而代之的是保存您需要向下发送到最顶层组件中的子组件的任何数据，或者如果 Helloworld 组件是功能组件，则将其作为主组件的方法；如果不是，请尝试将其状态保存在最顶层组件中，并使 helloworld 成为方法你的第一个组件。

从反应路由器中的 header 组件调用组件函数

call a component function from header componet in react router

javascript

reactjs

react-router

react-redux

react-router-redux