如何在按钮点击时调用React父组件的showMessage函数？

我希望点击子组件的按钮时调用父组件的showMessage函数，从而显示“Message”文本，但不知道怎么实现。相关代码如下：

父组件（Message.js） #

export default function Message({ component }) {
  const [state, setState] = useState(false);

  const showMessage = () => {
    setState(true);
  };

  return (
    <div>
      {component}
      {state ? <div>Message</div> : null}
    </div>
  );
}

使用父组件的代码（App.js） #

import Message from "./message";

const EmbendComp = () => {
  const onClick = () => {
    alert("oooo");
  };
  return (
    <div className="App">
      <h1>Component</h1>
      <button onClick={onClick}>show Message</button>
    </div>
  );
};

export default function App() {
  return (
    <>
      <Message component={<EmbendComp />} />
    </>
  );
}

当前核心问题是子组件EmbendComp无法获取父组件Message的showMessage函数，因为仅把EmbendComp作为属性传入，未传递回调逻辑。以下两种方法可以解决：

方法一：用React.cloneElement注入props #

修改父组件Message，通过cloneElement克隆传入的组件，将showMessage作为props传递给子组件：

import { useState, cloneElement } from 'react';

export default function Message({ component }) {
  const [state, setState] = useState(false);

  const showMessage = () => {
    setState(true);
  };

  // 克隆组件并注入showMessage属性
  const injectedComponent = cloneElement(component, { showMessage });

  return (
    <div>
      {injectedComponent}
      {state ? <div>Message</div> : null}
    </div>
  );
}

接着修改EmbendComp，接收showMessage并在按钮点击时调用：

const EmbendComp = ({ showMessage }) => {
  const onClick = () => {
    showMessage();
  };
  return (
    <div className="App">
      <h1>Component</h1>
      <button onClick={onClick}>show Message</button>
    </div>
  );
};

方法二：通过children传递回调 #

调整Message组件的结构，让它接收一个函数类型的children，直接传递showMessage：

// Message.js
import { useState } from 'react';

export default function Message({ children }) {
  const [state, setState] = useState(false);

  const showMessage = () => {
    setState(true);
  };

  return (
    <div>
      {children(showMessage)}
      {state ? <div>Message</div> : null}
    </div>
  );
}

然后修改App组件的使用方式，将showMessage传递给EmbendComp：

// App.js
import Message from "./message";

const EmbendComp = ({ showMessage }) => {
  const onClick = () => {
    showMessage();
  };
  return (
    <div className="App">
      <h1>Component</h1>
      <button onClick={onClick}>show Message</button>
    </div>
  );
};

export default function App() {
  return (
    <>
      <Message>
        {(showMessage) => <EmbendComp showMessage={showMessage} />}
      </Message>
    </>
  );
}

完成以上修改后，点击按钮即可调用父组件的showMessage函数，显示“Message”文本。

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