0

新手来这里反应。

TLDR：我有一个辅助函数，调用createNotification它时使用 render()将<ToastNotification />组件插入到元素中。container如果我使用 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;

应用程序.js

//imports

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

谢谢

4

2 回答 2

1

通过createPortal()在render().

如果有人可以提供解释，将不胜感激。

export const createNotification = () => {
  const container = document.getElementById("notificationContainer");
  console.log(container);
  return render(createPortal(<ToastNotification />, container), document.createElement("div"));
};
于 2021-11-28T14:41:28.870 回答
0

createNotification 未安装在应用程序 Virtual Dom 的组件中...当您使用 render(createPortal) 时，您只需创建 spearted 应用程序。

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

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

const Login = () => {
    const [validate, setValidate] = useState(false);
    
    const validateLogin = async (event) => {
        if('some logic')
            return setValidte(true)
        setVAlidte(false)
    };


    useEffect(() => {
        if(!valite)
            return;
        //axios heare
    }, [validate])
    // main component content
    
    
    return (
        <>
            {!validate && <CreateNotfication/>}
            <!-- validateLogin() called on form submit -->
        </>
    );
};
于 2021-11-28T16:42:16.253 回答