时间戳

首页 > 解决方案 > 将可重用组件的更改传递到另一个可重用组件中

reactjs - 将可重用组件的更改传递到另一个可重用组件中

问题描述

我遇到了一个漂亮的库Cupertino-Pane，它就像一个从底部打开的抽屉，就像您单击Twitter底部可拖动抽屉上的选项图标时一样。欲了解更多信息：https://github.com/roman-rr/cupertino-pane

我有一个想要实现的逻辑，因为在某些情况下我将在我的应用程序中使用窗格，所以我决定将其设为可重用组件，如下所示：

import { CupertinoPane } from "cupertino-pane";
import { useEffect, useRef } from "react";
import { PanelProps } from "../../interfaces";

const IonDrawer = ({ panelKey, show, children }: PanelProps) => {
  const drawerRef = useRef<CupertinoPane>();

  const hidePanel = async () => {
    console.log("Tapped");
    await drawerRef.current?.hide();
  };

  useEffect(() => {
    drawerRef.current = new CupertinoPane(`.${panelKey}`, {
      backdrop: true,
      bottomClose: true,
      buttonClose: false,
      parentElement: "body",
      fastSwipeClose: true,
      fitHeight: true,
      onBackdropTap: () => hidePanel(),
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    const showPanel = async () => {
      await drawerRef.current?.present({ animate: true });
    };

    if (show) {
      showPanel();
    } else {
      hidePanel();
    }
  });

  return <div className={panelKey}>{children}</div>;
};

export default IonDrawer;

这是主窗格。onBackdropTap，我想始终禁用面板。

现在这个组件现在被另一个可重用的组件使用。

const Feed: FC<FeedProps> = ({
   .....
  panelKey,
  ......
}) => {
  const slideRef = useRef<HTMLIonSlidesElement>(null);
  const [show, setShow] = useState<boolean>(false);
    
        <IonDrawer show={show} panelKey={panelKey}>
                  <h3>John Doe</h3>
                </IonDrawer>
        
                    <IonButton className="btn" fill="clear" color="secondary">
                      <div className="d-flex align-center">
                        <IoEllipsisHorizontalCircleOutline
                          size="20"
                         // ShowPane When Button is Clicked, then Hide When Backdrop is Clicked, But i got confused
                          onClick={() => setShow(true)}
                        />
                      </div>
                    </IonButton>

在我的 HomeComponent 中，Feed 组件是这样渲染的

const Feed1: FeedContent = {
  ...OtherProps
  panelKey: "panel-1",
};

const Feed2: FeedContent = {
  ...otherProps
  panelKey: "panel-2",
};

 <Feed {...Feed1} />
 <Feed {...Feed2} />

我想在单击“上方按钮”时显示窗格，并在单击 中时禁用它backDrop，IonDrawer但是单击背景时show不会转到false.

当从 IonDrawer 中点击 BackDrop 时，我怎么知道？

标签： reactjsionic-framework

解决方案

棘手但解决了！！！

我传递了一个回调函数作为道具，IonDrawer component,如下所示：

  onClosePanel,

然后函数调用

hidepanel() function:

onClosePanel(() => {
      hidePanel();
    });

在另一个组件中使用 IonDrawer 时，

                 <IonDrawer
                    show={show}
                   ....
                    onClosePanel={() => setShow(false)}
                  >
                    <IonItem>
                      <IonLabel>Join</IonLabel>
                      <p>dddndndndbdb</p>
                      <IonLabel>Join</IonLabel>
                    </IonItem>
                  </IonDrawer>

推荐阅读