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

【问题标题】：Pass Changes from a Reusable Component inside another Resuable component将可重用组件的更改传递到另一个可重用组件中
【发布时间】：2021-07-01 01:02:04
【问题描述】：

我遇到了一个名为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} />

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

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

【问题讨论】：

标签： reactjs ionic-framework

【解决方案1】：

棘手但解决了！！！

我在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>

【讨论】：