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

【问题标题】：call a component function from header componet in react router从反应路由器中的标头组件调用组件函数
【发布时间】：2019-01-09 15:54:01
【问题描述】：

她是我的 index.js 文件，layout(header, middel-container, footer)

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

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

我该怎么做。（这不是子组件，父组件，所以我可以将函数名作为道具传递。）

请帮帮我。

【问题讨论】：

你可以 lift the state up 到你最顶层的组件和状态和状态改变函数到 Header 和 Login 组件作为道具。

标签： javascript reactjs react-router react-redux react-router-redux

【解决方案1】：

在您的登录组件中从 react-router-dom 导入 {Link}。添加指向“/”的链接，如 **abc。如果你想在登录组件中调用一个方法（这样它应该是一个类组件..）那么你应该尝试在你的 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 成为方法您的第一个组件。

【讨论】：