在React中从父功能组件调用子功能组件方法

Question

下面是子功能组件和父功能组件的代码。子组件使用一个库，该库为我提供了重置函数，但我需要调用该重置函数的事件在父组件中。是他们的一种方法来调用子组件函数从父组件?如果有人能帮我做这件事，我会很感激的。

import React from 'react';
export default function MyChildFunction() {
const {
Test
reset,
}
return (
<div style={{textAlign: 'center'}}>
<div style={{fontSize: '30px', color : 'white'}}>
<span>{Test}</span>:<span>{Test}</span>:<span>{Test}</span>
</div>
</div>    
);
function handleReset() {
{reset()};
}
}
export default function NavBar({
return (
<div>
<MyChildFunction/>
</div>
)
}
import NavBar from "./components/NavBar";
function App() {
const changeUserState = (State) => {
alert(State);
MyChildFunction.handleReset(); -- here i want to have the function called.
setState(State);
};
return (
<>
<NavBar/>
</>
);
}

Answer 1

我创建了一个单例类，并将我的函数订阅到一个侦听器函数，并在父组件中创建了这个类的实例，以便从那里调用子组件的方法。