从另一个组件调用类方法

Question

React对我来说是一个新的编程环境。所以我可能对某些对象使用了错误的名称。

我想从文件Navbar.jsx中的组件调用文件App.jsx中类中的方法

App.jsx:

import React, {} from "react";
import { Navbar, Home, Footer, Documentation } from "./components";
class App extends React.Component  {
constructor(props)
{
super(props);
this.state = { mainComponent: 'Home' };
}
getClick = () => {
console.log('test');
}
render() {
return (
<div className="min-h-screen gradient-bg-welcome">
<Navbar getClick={this.getClick}/>
<Home/>
<Footer/>
</div>
); 
}
}
export default App;

Navbar.jxs:

...
const Navbar = () => {
...
return (
...
<div ... onclick={() => (call getClick in App.jsx here)}>
...
</div>
);
}
export default Navbar;

我在网上搜索了一下，尝试了几个例子中的一些代码，但我可能错过了一些简单的东西。我不知道如何从Navbar.jsx.调用getClick

我也尝试过使用状态，从我读到的内容来看，这应该是一个更好的选择，但这对我来说也不起作用

我的目标：

在App.jsx中，我有这个：

<Navbar/>
<Home/>
<Footer/>

我想从我有一些链接文本的导航栏中，根据我在导航栏中单击的链接，重新加载/更改另一个组件的导航栏和页脚之间的组件。

Answer 1

试试这个

const Navbar = (props) => {
...
return (
...
<div ... onclick={() => props.getClick()}>
...
</div>
);
}
export default Navbar;

我们在这里做的很简单，我们只是将函数作为prop从父级传递。并使用传递的props来访问和调用该函数。