Javascript 处理父元素在子组件中单击

基本上，我有一组页面，通常以模式显示，但可能不会。我有一个

Manager

组件，它处理通过我们需要的特定流在它们之间进行的操作。我在

MyModal

组件的标题中有一个后退按钮，当单击该按钮时，我需要以某种方式告诉

经理返回页面。但是，
管理器
对后退按钮一无所知，页面也不知道

问题：如何向
管理器
组件发送事件或执行其他操作，使其在单击
后退按钮时知道返回页面

下面是一些示例代码

const MyModal: React.FC = ({show, onHide}) => (
    <Modal show={show} onHide={onHide}>
        <BackButton onClick={/* What do I do here? */}/>
        <Modal.Body>
            <Manager {/* Do I put something here? */}/>
        </Modal.Body>
    </Modal>
);

constmymodal:React.FC=（{show，onHide}）=>(
);

const管理器：React.FC=（）=>{
const[page，setPage]：[number，（d:number）=>void]=useState（0）；
返回(
{[
设置页面（1）}/>
设置页面（2）}/>
setPage（1）}onCancel={（）=>setPage（3）/>
设置页面（4）}/>
设置页面（1）}/>
][第页]}
);
};

另外，
Modal
和
Modal.Body
来自react引导。我认为这更好地说明了让他们留在家里的想法

我有过这样的想法：我知道我可以将这两个组件合并成一个组件，在大多数情况下这是可以的，但我想知道这是否具体可行。如果有意义的话，在一个单独的组件中使用action fire。我一直想知道如何使用
ref
，但我已经读了很多关于它们的书，我仍然感到困惑。我想我可以通过某种方式将
ref
传递到按钮的
Manager
组件中，但我无法让它工作。
你能将
setPage
传递到页面组件中，这样当你按下后退按钮时他们就可以设置页面了吗？他们对后退按钮也一无所知。“后退”按钮位于包装组件中。我来澄清我的问题。啊，我明白了。然后是的，你应该让你的状态达到需要它的最高部分。在这种情况下，如果这是
MyModal
，那么
page
状态和
setPage
调度程序应该在modalI中，实际上可能会这样做。我将把这个问题保持原样，看看是否有人能告诉我如何具体完成我的要求。我觉得必须有办法做到这一点，也许是通过裁判或其他什么？如果你使用上下文挂钩？您可以在连接的组件之间共享信息：D
const Manager: React.FC = () => {
    const [page, setPage]: [number, (d: number) => void] = useState(0);

    return (
        <>
            {[
                <Page1 onComplete={() => setPage(1)}/>
                <Page2 onComplete={() => setPage(2)}/>
                <Page3 onComplete={() => setPage(1)} onCancel={() => setPage(3)/>
                <Page4 onComplete={() => setPage(4)}/>
                <Page5 onComplete={() => setPage(1)}/>
            ][page]}
        </>
    );
};