Question

这是我的index.js文件，布局（页眉，middel容器，页脚）

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

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

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

请帮助我。

Answer 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成为方法您的第一个组件。

从React Router中的header componet调用组件函数

1 个答案: