请求将指定JS代码按照最佳实践转换为ReactJS代码

核心优化点 #

• 替换原生内联onclick为React标准的onClick事件处理
• 增加全局变量安全校验，避免Crisp脚本未加载时抛出错误
• 封装为可复用组件，支持自定义样式与文本
• 适配服务端渲染（SSR）场景

基础实现版本 #

import { useCallback } from 'react';

const CrispChatButton = () => {
  const openCrispChat = useCallback(() => {
    // 校验$crisp全局对象是否存在
    if (window.$crisp) {
      window.$crisp.push(['do', 'chat:open']);
    }
  }, []);

  return (
    <button onClick={openCrispChat}>
      Click Me!
    </button>
  );
};

export default CrispChatButton;

增强复用版（推荐） #

这个版本支持自定义样式、按钮文本，同时适配SSR场景：

import { useCallback } from 'react';

const CrispChatButton = ({ className, children = 'Click Me!' }) => {
  const openCrispChat = useCallback(() => {
    // 适配SSR，先判断window是否存在，再校验$crisp
    if (typeof window !== 'undefined' && window.$crisp) {
      window.$crisp.push(['do', 'chat:open']);
    }
  }, []);

  return (
    <button
      onClick={openCrispChat}
      className={className}
      aria-label="打开在线客服聊天窗口"
    >
      {children}
    </button>
  );
};

export default CrispChatButton;

组件使用示例 #

// 在业务组件中引入并使用
import CrispChatButton from './CrispChatButton';

const Page = () => {
  return (
    <div className="page-container">
      {/* 自定义按钮文本和样式类 */}
      <CrispChatButton className="rounded bg-blue-500 text-white px-4 py-2">
        联系在线客服
      </CrispChatButton>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Bangkok Seo