如何避免相互引用的React组件出现require循环警告？

针对Button和Modal组件互相引用导致的循环依赖警告，不用合并文件也能解决，以下是几种可行方案：

1. 动态导入（延迟加载） #

通过动态导入组件，避免模块初始化阶段就形成互相引用的闭环。比如在Modal组件里，仅当需要渲染Button时才加载它：

方式一：条件动态导入 #

// Modal.jsx
import { useState, useEffect } from 'react';

const Modal = (props) => {
  const [ButtonComponent, setButtonComponent] = useState(null);

  useEffect(() => {
    if (props.somePropThatRequiresButton) {
      // 仅在需要时加载Button组件
      import('./Button').then(module => setButtonComponent(module.default));
    }
  }, [props.somePropThatRequiresButton]);

  return (
    <BottomSheetModal ...>
      ...
      {ButtonComponent && <ButtonComponent ... />}
    </BottomSheetModal>
  );
};

方式二：React.lazy + Suspense #

适合组件渲染时就需要的场景，用React内置的懒加载能力处理：

// Modal.jsx
import { Suspense, lazy } from 'react';
// 懒加载Button组件
const Button = lazy(() => import('./Button'));

const Modal = (props) => {
  return (
    <BottomSheetModal ...>
      ...
      {props.somePropThatRequiresButton && (
        <Suspense fallback={<div>加载中...</div>}>
          <Button ... />
        </Suspense>
      )}
    </BottomSheetModal>
  );
};

2. 重构组件职责，父组件统一管理状态 #

打破组件直接互引的关系，把Modal的显示/隐藏、数据传递逻辑交给父组件：

• Button只负责触发“打开Modal”的动作，不直接渲染Modal；
• Modal作为独立组件，由父组件控制显示状态，Modal内的Button同样只触发动作，不依赖Modal本身。

示例代码：

// ParentComponent.jsx
import { useState } from 'react';
import Button from './Button';
import Modal from './Modal';

const ParentComponent = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalData, setModalData] = useState(null);

  const openModal = (data) => {
    setModalData(data);
    setIsModalOpen(true);
  };

  return (
    <>
      <Button onClick={() => openModal({ initialData: '初始数据' })} />
      <Modal 
        isOpen={isModalOpen} 
        onClose={() => setIsModalOpen(false)}
        data={modalData}
        onReopen={(newData) => openModal(newData)}
      />
    </>
  );
};

// Button.jsx
const Button = ({ onClick, ...props }) => {
  return (
    <TouchableOpacity onClick={onClick} {...props}>
      {/* Button自身内容 */}
    </TouchableOpacity>
  );
};

// Modal.jsx
import Button from './Button';

const Modal = ({ isOpen, onClose, data, onReopen }) => {
  return (
    <BottomSheetModal isOpen={isOpen} onClose={onClose}>
      {/* 使用传入的data渲染内容 */}
      <Button onClick={() => onReopen({ newData: '新数据' })}>重新打开</Button>
    </BottomSheetModal>
  );
};

此时Button不再依赖Modal，Modal单向依赖Button，不会形成循环。

3. 提取公共逻辑到独立模块 #

把两个组件共享的Modal控制逻辑抽成独立的自定义Hook，让组件通过中间层通信，而非直接互引：

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

export const useModal = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [modalData, setModalData] = useState(null);

  const open = (data) => {
    setModalData(data);
    setIsOpen(true);
  };

  const close = () => {
    setIsOpen(false);
    setModalData(null);
  };

  return { isOpen, modalData, open, close };
};

然后在组件中使用这个Hook：

// Button.jsx
import { useModal } from './useModal';

const Button = ({ ...props }) => {
  const { open } = useModal();
  return (
    <TouchableOpacity onClick={() => open({ data: '初始数据' })} {...props}>
      {/* Button内容 */}
    </TouchableOpacity>
  );
};

// Modal.jsx
import { useModal } from './useModal';
import Button from './Button';

const Modal = () => {
  const { isOpen, modalData, close, open } = useModal();
  return (
    <BottomSheetModal isOpen={isOpen} onClose={close}>
      {/* 使用modalData渲染内容 */}
      <Button onClick={() => open({ data: '新数据' })}>重新打开</Button>
    </BottomSheetModal>
  );
};

两个组件都依赖独立的Hook模块，而非互相依赖，自然消除循环警告。

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