React 中，怎么实现父组件调用子组件中的方法？

欢迎来到前端的日常，前端宝典持续更新，目前已经有200+道面试题，更多面试题可以到 前端宝典 进行查看，快来刷题吧~

在 React 中，父组件调用子组件中的方法可以通过以下几种方式实现：

1. 通过 ref 调用：

   • 首先，给子组件添加 ref 属性。
   • 然后，在父组件中通过 ref 调用子组件的方法。

   // 子组件
   function ChildComponent(props, ref) {
     const handleClick = () => {
       console.log('子组件方法被调用');
     };
   
     React.useImperativeHandle(ref, () => ({
       handleClick
     }));
   
     return <button onClick={handleClick}>点击我</button>;
   }
   
   // 父组件
   function ParentComponent() {
     const childRef = React.useRef(null);
   
     const callChildMethod = () => {
       if (childRef.current) {
         childRef.current.handleClick();
       }
     };
   
     return (
       <>
         <ChildComponent ref={childRef} />
         <button onClick={callChildMethod}>调用子组件方法</button>
       </>
     );
   }
   

2. 通过 props 传递函数：

   • 将子组件的方法作为 props 传递给子组件。
   • 在子组件中通过 props 调用传递的方法。

   // 子组件
   function ChildComponent({ onButtonClick }) {
     return <button onClick={onButtonClick}>点击我</button>;
   }
   
   // 父组件
   function ParentComponent() {
     const handleButtonClick = () => {
       console.log('子组件方法被调用');
     };
   
     return <ChildComponent onButtonClick={handleButtonClick} />;
   }
   

3. 使用 Context API：

   • 如果需要在多个组件之间共享方法，可以使用 Context API。

   // 创建 Context
   const MyContext = React.createContext(null);
   
   // 子组件
   function ChildComponent() {
     const value = React.useContext(MyContext);
     return <button onClick={value.handleClick}>点击我</button>;
   }
   
   // 父组件
   function ParentComponent() {
     const handleButtonClick = () => {
       console.log('子组件方法被调用');
     };
   
     return (
       <MyContext.Provider value={{ handleClick: handleButtonClick }}>
         <ChildComponent />
       </MyContext.Provider>
     );
   }
   

这些方法可以根据具体需求和场景选择使用。通常情况下，通过 props 传递函数是最简单和常用的方式。