函数 * 是 *“返回JSX”。但是代码没有对返回的JSX * 做任何事情 *。尽管总的来说我认为你在这里采取了完全错误的方法。
首先，把你的“吐司”做成一个React组件，它几乎就是一个React组件，你所要做的就是纠正名称中的大小写，并解构 prop ：

export const Toast = ({message}) => {
  return (
    <div>
      {message}
    </div>
  );
};

然后 * 使用状态 * 在标记中有条件地显示/隐藏组件。例如：

export const Comp = () => {
  const [message, setMessage] = useState('');

  const clickEvent = () => {
    setMessage('example text');
  };

  return(
    <>
      <button onClick={clickEvent}>
        toast
      </button>
      {
        message.length > 0 && <Toast message={message} />
      }
    </>
  );
};

如果愿意，您甚至可以将条件逻辑移到组件本身中：

export const Toast = ({message}) => {
  return message?.length > 0 ? (
    <div>
      {message}
    </div>
  ) : null;
};

这简化了使用：

export const Comp = () => {
  const [message, setMessage] = useState('');

  const clickEvent = () => {
    setMessage('example text');
  };

  return(
    <>
      <button onClick={clickEvent}>
        toast
      </button>
      <Toast message={message} />
    </>
  );
};

无论您如何组织逻辑，都有无穷无尽的变化，但总的来说，您不希望 * 从单击处理程序返回JSX *，因为：
1.事件处理程序不对返回值执行任何操作。
1.在React中，手动向页面追加标记通常是错误的方法。
相反，您可以为组件定义标记，使其包含各种“有条件地”包含的元素，并通过更新状态值来管理这些条件。