如何将React Bootstrap按钮的onClick函数作为Props传递给另一个组件

核心思路 #

本质就是把父组件中定义的点击处理函数，通过props传递给目标子组件，子组件接收后绑定到自身的按钮（或其他交互元素）的onClick属性上即可。结合你提供的Modal代码，以下是具体实现方案：

方案1：传递打开Modal的点击逻辑给自定义子组件 #

假设你需要把打开Modal的点击函数传给一个自定义按钮组件（比如CustomTriggerButton），步骤如下：

1. 父组件中定义并传递函数

import React, { useState } from 'react';
import { Button } from 'react-bootstrap';
import MyVerticallyCenteredModal from './MyVerticallyCenteredModal';
import CustomTriggerButton from './CustomTriggerButton';

const ParentComponent = () => {
  const [modalShow, setModalShow] = useState(false);

  // 提取打开Modal的处理函数（可选，但更利于维护和性能优化）
  const handleOpenModal = () => setModalShow(true);

  return (
    <>
      {/* 原有的触发按钮 */}
      <Button variant="primary" onClick={handleOpenModal}>
        Launch vertically centered modal
      </Button>

      {/* 将打开函数作为props传给自定义子组件 */}
      <CustomTriggerButton openModal={handleOpenModal} />

      <MyVerticallyCenteredModal
        show={modalShow}
        onHide={() => setModalShow(false)}
      />
    </>
  );
};

export default ParentComponent;

2. 子组件接收并使用props

import { Button } from 'react-bootstrap';

// 子组件通过解构赋值接收props中的openModal函数
const CustomTriggerButton = ({ openModal }) => {
  return (
    <Button variant="secondary" onClick={openModal} className="ms-2">
      从子组件打开Modal
    </Button>
  );
};

export default CustomTriggerButton;

方案2：传递关闭Modal的逻辑给Modal内部组件 #

你的MyVerticallyCenteredModal已经接收了onHide props，若要在Modal内部的自定义按钮上使用这个关闭逻辑，直接绑定即可：

import { Modal, Button } from 'react-bootstrap';

const MyVerticallyCenteredModal = ({ show, onHide }) => {
  return (
    <Modal show={show} onHide={onHide} centered>
      <Modal.Header closeButton>
        <Modal.Title>Centered Modal</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        这是垂直居中的Modal内容
      </Modal.Body>
      <Modal.Footer>
        {/* 直接使用props传递的onHide作为按钮的onClick */}
        <Button variant="secondary" onClick={onHide}>
          关闭Modal
        </Button>
      </Modal.Footer>
    </Modal>
  );
};

export default MyVerticallyCenteredModal;

性能优化提示 #

如果父组件频繁重渲染，传递的匿名函数会导致子组件不必要的重渲染，此时可以用useCallback包裹处理函数：

import { useState, useCallback } from 'react';

// ...
const handleOpenModal = useCallback(() => setModalShow(true), []);
// ...

内容的提问来源于stack exchange，提问作者unique gf