如何在其他组件中调用React Accordion组件的折叠切换方法

场景1：两个组件为父子关系（Modal是Invoice的子组件） #

直接通过props透传方法即可，实现成本最低：

• 调整Invoice组件，把toggleAccordion方法通过props传给子组件Modal：

import React, { useRef } from "react";
import Modal from './Modal';

function Invoice() {
  const accordionRef = useRef(null);

  const toggleAccordion = () => {
    // 增加可选链避免ref未挂载时报错
    accordionRef.current?.click();
  }

  return (
    <div>
      <div ref={accordionRef}>折叠面板元素</div>
      {/* 把方法传递给子组件 */}
      <Modal toggleAccordion={toggleAccordion} />
    </div>
  )
}
export default Invoice;

• 调整Modal组件，从props中获取方法直接调用：

import React from "react";

function Modal({ toggleAccordion }) {
  // 可在任意需要的时机调用，比如组件挂载、点击事件触发时
  const handleClick = () => {
    toggleAccordion();
  }

  return <button onClick={handleClick}>切换折叠面板状态</button>
}
export default Modal;

场景2：两个组件为兄弟/无直接嵌套关系 #

可以用Context共享方法，适合层级深、透传props不方便的场景：

• 第一步：创建共享Context

// src/context/AccordionContext.js
import { createContext, useContext } from 'react';

const AccordionContext = createContext();
export const AccordionProvider = AccordionContext.Provider;
// 封装自定义Hook简化调用
export const useAccordion = () => useContext(AccordionContext);

• 第二步：在两个组件的公共父组件中用Provider包裹，注入方法

// 公共父组件示例，比如App.js
import React, { useRef } from 'react';
import { AccordionProvider } from './context/AccordionContext';
import Invoice from './Invoice';
import Modal from './Modal';

function App() {
  const accordionRef = useRef(null);
  const toggleAccordion = () => {
    accordionRef.current?.click();
  }

  return (
    <AccordionProvider value={{ toggleAccordion, accordionRef }}>
      <Invoice />
      <Modal />
    </AccordionProvider>
  )
}
export default App;

• 第三步：两个组件分别从Context中取对应属性和方法

// Invoice组件
import { useAccordion } from './context/AccordionContext';
function Invoice() {
  const { accordionRef } = useAccordion();
  return <div ref={accordionRef}>折叠面板元素</div>
}
export default Invoice;

// Modal组件
import { useAccordion } from './context/AccordionContext';
function Modal() {
  const { toggleAccordion } = useAccordion();
  // 任意时机调用即可
  return <button onClick={() => toggleAccordion()}>切换折叠面板状态</button>
}
export default Modal;

小提示：如果项目已经接入了Redux、Zustand等全局状态管理工具，也可以把折叠面板的状态存到全局store中，两个组件分别读写状态即可实现联动。

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