Javascript React门户输入更改将删除元素

我创建这支钢笔是为了演示它：

基本上我有这个门户：

const ChatArea = ({ children }) => {
  const el = document.createElement("div");
  el.classList.add('chatbox')
  const root = document.getElementById("rootus");

  useEffect(() => {
    root.appendChild(el);
    return () => root.removeChild(el);
  }, []);

  return createPortal(children, el);
};

并使用类似于：

const ChatBox = () => {
  const [ reply, setReply ] = useState('');
  const handleReply = (e) => {
    e.preventDefault();
    setReply(e.target.value);
  }
  return (
    <ChatArea>
      <div className="chat-title">Bot Convo</div>

      <div className="chat-convo"></div>

      <div className="chat-reply">
        <input type="text" value={reply} onChange={handleReply} />
        <button>Send</button>
      </div>
    </ChatArea>
  )
}

const ChatBox=（）=>{
const[reply，setReply]=useState（“”）；
常量handleReply=（e）=>{
e、 预防默认值（）；
setReply（即目标值）；
}
返回(
机器人车队
发送
)
}

---

由于某种原因，当你开始键入聊天框的主体时，它似乎消失了。。。我已将日志放入

useffect

中，以查看是否是这导致了它，但它没有显示我的想法，这里有两个问题：

第一个问题是

useEffect(() => {
    root.appendChild(el);
    return () => root.removeChild(el);
  }, []);

现在根据钩子原理，依赖项应该与钩子中使用的变量相匹配。如果未使用react，则下次不会运行该效果

因此，在您的情况下，当您单击打开聊天时，它会打开聊天框。效果运行并使用输入框呈现门户

当你打完第一个字母后，发生了一次变化

它触发了ChatArea的重新渲染器，理想情况下，它应该再次运行该效果，但没有运行，因为依赖项数组为空，react不知道何时重新渲染。因此，该效果第一次在ChatArea运行UI的位置运行，下一次，该效果没有运行，因为依赖项数组为空

这一行：

返回createPortal（子项，el）；//是指创建的新el 但不附加到DOM。因此，在聊天盒内的UI上看不到任何内容

请参阅此链接：常见问题解答部分它们很棒：）

第二期：

理想情况下，不应该每次都创建新的div。在连续的重新渲染器中持久化“div”元素

看看这个实现：我知道还有其他的实现方法。 欢迎反馈

const{
提供，
createPortal
}=反应性；
常数{
useState，
使用效果，
useRef
}=反应；
施工区=({
儿童
}) => {
const el=document.createElement（“div”）；
el.classList.add（'chatbox'）
//上述el在每个渲染中都会不同
//root将保持不变，理想情况下root和chatdiv应该作为道具传递
const root=document.getElementById（“rootus”）；
//此val和setVal用于切换渲染后的图表区域
//chatDiv已更新
const[val，setVal]=useState（真）
const chatDiv=useRef（空）
//首先使用effect保存div
useffect（（）=>{
如果（！chatDiv.current）{
chatDiv.current=el
setVal（！val）
}
}，[chatDiv]）
useffect（（）=>{
root.appendChild（chatDiv.current）；
return（）=>{
返回root.removeChild（chatDiv.current）
}；//您正在删除它
}，[chatDiv，root]）；
if（当前聊天室）{
返回createPortal（子项，chatDiv.current）
}
返回空
//在你的情况下，因为返回首先发生，并发现了el
};
常量聊天框=（）=>{
const[reply，setReply]=useState（“”）；
常量handleReply=（e）=>{
e、 预防默认值（）；
setReply（即目标值）；
}
报税表（<
聊天区>
<
div className=“聊天标题”>机器人车队
<
div className=“聊天车队”>