javascript - ReactDom createPortal() 不起作用，但 render() 起作用，并且只有重复触发时才会起作用 - 这是为什么？

Question

新手在这里 react 。

TLDR:我有一个名为 createNotification 的辅助函数当调用时会插入 <ToastNotification />组件进入 container使用 render() 的元素。如果我使用 createPortal() 则不会附加任何内容。如果我使用渲染，尽管有多个触发器，但该组件仅添加一次。

谁能帮我弄清楚发生了什么事吗？

谢谢

helpers.js

import { ToastNotification } from "carbon-components-react";
import { render, createPortal } from "react-dom";

export const createNotification = () => {
  const container = document.getElementById("notificationContainer");
  console.log(container); //just to check function is running and has found container
  return render(<ToastNotification />, container); //works but only once, not on multiple triggers
  return createPortal(<ToastNotification />, container); //doesn't render anything in container
};

上面的函数是根据需要从其他组件调用的:

登录.js

import { createNotification } from "../../helpers";

const Login = () => {
  const validateLogin = async (event) => {
    createNotification();
    // validation logic
    performLogin();
  };

  const performLogin = async () => {
    //axios call here
  };

  // main component content
  return (
    <>
     <!-- validateLogin() called on form submit -->
    </>
  );
};

export default Login;

app.js

//imports

function App() {
  return (
    <div>
      <div className="App"></div>
    </div>
  );
}
export default App;

谢谢

Answer 1

我自己通过在 render() 中添加 createPortal() 解决了这个问题。

如果有人能提供解释，我们将不胜感激。

export const createNotification = () => {
  const container = document.getElementById("notificationContainer");
  console.log(container);
  return render(createPortal(<ToastNotification />, container), document.createElement("div"));
};