如何以编程方式调用返回React JSX的Toast函数并渲染

方案一：组件内状态控制（适合单组件场景） #

直接在调用Toast的组件里用状态控制显示/隐藏，把Toast的JSX放进组件的渲染树里就行。

修改后代码：

// 可单独抽成Toast组件文件
const Toast = ({ message, visible }) => {
  if (!visible) return null;
  return (
    <div style={{
      position: 'fixed',
      top: '20px',
      left: '50%',
      transform: 'translateX(-50%)',
      padding: '10px 20px',
      backgroundColor: 'rgba(0,0,0,0.7)',
      color: 'white',
      borderRadius: '4px'
    }}>
      {message}
    </div>
  );
};

// 调用Toast的组件
export const Comp = () => {
  const [toastVisible, setToastVisible] = useState(false);
  const [toastMessage, setToastMessage] = useState('');

  const clickEvent = () => {
    setToastMessage('example text');
    setToastVisible(true);
    // 3秒后自动关闭
    setTimeout(() => setToastVisible(false), 3000);
  };

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

方案二：全局编程式Toast（推荐跨组件使用） #

如果需要在应用任意地方调用toast()就能弹消息，可以手动创建DOM元素并挂载到页面上。

实现代码：

// toast.js
export const toast = (message, duration = 3000) => {
  // 创建Toast DOM元素
  const toastElement = document.createElement('div');
  toastElement.style.cssText = `
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background-color: rgba(0,0,0,0.7);
    color: white;
    border-radius: 4px;
    z-index: 9999;
  `;
  toastElement.textContent = message;

  // 添加到页面body
  document.body.appendChild(toastElement);

  // 定时移除Toast
  setTimeout(() => {
    document.body.removeChild(toastElement);
  }, duration);
};

// 调用组件
export const Comp = () => {
  const clickEvent = () => {
    toast('example text');
  };

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

为啥原来的写法不生效？ #

你原来的toast函数只是返回了JSX对象，但这个对象根本没被React加入到渲染树里。React只会渲染组件return里的JSX，或者通过ReactDOM.render手动挂载的元素，单纯调用函数返回JSX不会触发渲染。

内容的提问来源于stack exchange，提问作者hossein ranjbar