Question

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

这里作为道具传递，所以上下文（提供者/消费者）不是问题。 https://codesandbox.io/s/mj7y4v2mnj

在这里，它是作为道具传递的useState，所以我不知道接下来要在哪里搜索... https://codesandbox.io/s/74860klz3j

Answer 1

您遇到的问题是，您直接在App组件中渲染Trigger组件，当内容值更改或reducer状态更改时，由于其他一些用于处理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

反应：函数调用门户不包含目标

1 个答案: