React Portal 输入更改删除元素

Question

我创建了这支笔来演示它：https://codepen.io/no1melman/pen/WWyJqQ

基本上我有这个门户：

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>
  )
}

出于某种原因，当您开始输入时，聊天框的正文似乎消失了...我已将日志放入 useEffect 以查看是否是它的原因，但它没有显示是什么我以为

Answer 1

这里有两个问题：

第一期是

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

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

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

当您输入第一个字母并且 onChange 发生时

它触发了 ChatArea 的重新呈现，理想情况下应该再次呈现运行效果，但没有运行因为依赖数组为空并且 React 不知道何时重新呈现render.so 效果运行第一次安装在聊天区域运行 UI 下一次，效果没有运行因为依赖数组是空白的。

这一行：

return createPortal(children, el); // 指的是创建的新 el 但未附加到 DOM。因此，在 UI 聊天框内什么也看不到。

参考这个 link：do not miss dependencies React hooks FAQs sections 它们很棒 :)

第二期：

理想情况下，不应每次都创建新的 div。在连续的重新渲染中保持 "div" 元素

查看此实现：我知道可以有其他实现方式。欢迎反馈。

const {
  render,
  createPortal
} = ReactDOM;
const {
  useState,
  useEffect,
  useRef
} = React;

const ChatArea = ({
  children
}) => {
  const el = document.createElement("div");
  el.classList.add('chatbox')
  // This el above will be different in each render 

  // root will remain same, ideally root and chatdiv should be passed as props
  const root = document.getElementById("rootus");

  // this val and setVal is done to toggle render the chart area after
  // chatDiv is updated
  const [val, setVal] = useState(true)


  const chatDiv = useRef(null)

  // First useEffect to persist the div 
  useEffect(() => {
    if (!chatDiv.current) {
      chatDiv.current = el
      setVal(!val)
    }
  }, [chatDiv])

  useEffect(() => {
    root.appendChild(chatDiv.current);
    return () => {
      return root.removeChild(chatDiv.current)
    }; // you are removing it 
  }, [chatDiv, root]);

  if (chatDiv.current) {
    return createPortal(children, chatDiv.current)
  }
  return null
  // In your case as the return happened first and found out the 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 NavBar = ({}) => ( <
  div className = "navbar" >
  <
  div > Home < /div> <
  div > Somewhere < /div> <
  /div>
);
const Main = () => {
  const [showChat, setShowChat] = useState(false);
  const openChat = () => {
    setShowChat(true);
  };
  const chatterbox = showChat ? ( < ChatBox / > ) : null;

  return ( <
    div className = "container" >
    <
    h2 > Main < /h2> <
    p >
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.The point of
    using Lorem Ipsum is that it has a more - or - less normal distribution of
    letters, as opposed to using 'Content here, content here', making it look like readable English.Many desktop publishing packages and web page editors now use Lorem Ipsum as their
    default model text, and a search
    for 'lorem ipsum'
    will uncover many web sites still in their infancy.Various versions have evolved over the years, sometimes by accident, sometimes on purpose(injected humour and the like). <
    /p> <
    p style = {
      {
        display: "flex",
        justifyContent: "center"
      }
    } >
    <
    button onClick = {
      openChat
    } > Open Chat < /button> <
    /p> <
    p style = {
      {
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        backgroundColor: "red"
      }
    } >
    {
      chatterbox
    } < /p> <
    /div>
  );
};
const App = ({}) => ( <
  div className = "app" >
  <
  NavBar / >
  <
  Main / >
  <
  /div>
);

render( < App / > , document.getElementById("rootus"));

body {
  font-family: Raleway;
}

* {
  box-sizing: border-box;
}

#rootus {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
}

.navbar {
  display: flex;
  justify-content: center;
}

.navbar>div {
  padding: 10px;
}

.navbar>div:hover {
  background-color: gray;
  cursor: pointer;
}

.container {
  width: 960px;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chatbox {
  width: 400px;
  height: 200px;
  position: absolute;
  bottom: 0;
  border: 2px solid black;
  background: white;
  display: flex;
  flex-direction: column;
}

.chat-title {
  background: black;
  color: white;
}

.chat-convo {
  flex: 1;
  display: flex;
}

.chat-reply {
  display: flex;
  border-top: 1px solid black;
}

.chat-reply>input {
  width: 80%;
  padding: 8px;
  border: none;
  outline: none;
}

.chat-reply>button {
  outline: none;
  border: none;
  flex: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="rootus">

</div>

Ui was not coming up proper in the Whosebug code snippet, so I had to edit somethings in styling. you can have a look at code pen codepen linkaccording to your original styling

React Portal 输入更改删除元素

React Portal input change removes elements

javascript

reactjs

react-hooks