強制重新渲染反應功能組件

Question

我正在嘗試在調用 function 時更新 ReactDom，

function showMessage(message, config) {
  ReactDOM.render(
    <Message message={message.body} />,
    document.getElementById(config.targetElementId)
  );
}

在消息組件中，

export default function Message({ message }) {
  const [open, setIsOpen] = useState(true);

  useEffect(() => {
    setIsOpen(true);
  }, [message]);

當消息更改時，我正在使用 useEffect 將 setIsOpen 更改為 true。 我希望組件在每次調用 showMessage(message, config) function 時調用此 useEffect。 現在，組件僅在消息文本更改時才重新呈現。 message 是一個類似“Example string”的字符串。 如果我多次使用 showMessage("Example string", config) 調用 function，它不會調用 useEffect。 僅當我更改字符串 showMessage("Example stringssss", config) 時，它才會重新呈現。 每次調用 showMessage function 時如何強制重新渲染？

Answer 1

您只需添加一個 props trigger就是一個 object。因此該組件將始終重新渲染

function showMessage(message, config) {
  ReactDOM.render(
    <Message message={message.body} trigger={{}} />,
    document.getElementById(config.targetElementId)
  );
}

function Message({ message, trigger })

  useEffect(() => {
    setIsOpen(true);
  }, [message, trigger]);