React：函数调用门户网站不包含目标

Question

我们遇到的问题是useReducer正在关闭我们应用程序中的Portal，我们无法控制它的行为。 https://codesandbox.io/s/724ozpxxk1正如你所看到的，当你点击触发器时，<Portal />会被打开并附加一个handleOutsideMouseClick。单击第一行时，处理程序会正确检查单击的目标是否为门户网站的子项。但是一旦您发送从父亲传递的动作，就不会识别被点击的目标是门户网站的子节点。

这里它作为道具传递，因此Context（提供者/消费者）不是问题。 https://codesandbox.io/s/mj7y4v2mnj

这里有一个useState作为道具传递，所以我不知道在哪里搜索下一个... https://codesandbox.io/s/74860klz3j

Answer 1

你遇到的问题是你直接在App组件中渲染Trigger组件，当内容值发生变化或者缩减器状态发生变化时会重新渲染，并且由于这个原因，你处理Portal开放状态的其他一些逻辑会导致你的Portal关闭像下面这样渲染你的组件

const App = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, { foo: "bar" });

  const appContextValue = useMemo(
    () => ({
      ...state,
      dispatch
    }),
    [state.foo]
  );

  return (
    <AppContext.Provider value={appContextValue}>
      {children}
    </AppContext.Provider>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(
  <App>
    <Trigger overlay={<Overlay />}>
      <div>trigger</div>
    </Trigger>
  </App>,
  rootElement
);

Working demo