syncfusion-react-common

Syncfusion React 组件中的通用功能

Syncfusion React 组件包含全面的通用实用工具和功能，可提升用户体验、确保跨文化支持，并为所有组件提供基础能力。本技能涵盖安装设置、动画、全球化、状态管理和安全注意事项，助你构建稳健的 React 应用。

目录

• 导航指南
• 快速入门
• 通用功能

导航指南

开始使用与框架设置

📄 阅读： references/getting-started.md

• 框架集成（Next.js、Remix、Vite、Preact、SharePoint）
• 软件包安装和 CSS 导入
• 组件初始化
• 快速入门示例

全球化

📄 阅读： references/globalization.md

• 支持阿拉伯语、希伯来语、波斯语的从右到左（RTL）布局
• 多语言支持的本地化（l10n）
• 使用 CLDR 数据的国际化（i18n）
• 数字和货币格式
• 日期和时间格式

高级功能与实用工具

📄 阅读： references/advanced-features.md

• 动画效果（FadeIn、ZoomOut、SlideUp 等）
• 动画计时（持续时间、延迟、全局设置）
• 拖放交互（Draggable、Droppable）
• 模板自定义与优化
• 使用 enablePersistence 持久化状态
• 安全最佳实践和 HTML 清理

快速入门

安装 Syncfusion React 组件包和主题包

npm install @syncfusion/ej2-react-grids@latest @syncfusion/ej2-tailwind3-theme@latest --save

注意： @syncfusion/ej2-base 包是所有 Syncfusion 组件的依赖项，安装任何 Syncfusion React 包时都会自动安装。无需在 package.json 文件中显式添加。

导入样式

@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/grid/index.css";

注册许可证密钥

步骤 1： 设置环境变量：

# Windows
setx SYNCFUSION_LICENSE "Your_License_Key_Here"

# Mac/Linux
export SYNCFUSION_LICENSE='Your_License_Key_Here'

步骤 2： 使用 NPX 命令激活许可证：

npx syncfusion-license activate

注意： 如需了解其他许可证注册方法，请参阅 Syncfusion 许可证密钥注册文档。

基本组件设置

import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Page } from '@syncfusion/ej2-react-grids';

function App() {
  const data = [
    { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
    { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 }
  ];

  return (
    <GridComponent dataSource={data} allowPaging={true}>
      <ColumnsDirective>
        <ColumnDirective field='OrderID' width='100' />
        <ColumnDirective field='CustomerID' width='100' />
        <ColumnDirective field='Freight' width='100' format="C2" />
      </ColumnsDirective>
      <Inject services={[Page]} />
    </GridComponent>
  );
}

export default App;

通用功能

启用状态持久化

<GridComponent dataSource={data} enablePersistence={true}>
  {/* Component content */}
</GridComponent>

启用 RTL 支持

import { enableRtl } from '@syncfusion/ej2-base';

// Global RTL enablement
enableRtl(true);

// OR per-component
<ListViewComponent enableRtl={true} />

添加动画效果

import { Animation } from '@syncfusion/ej2-base';

useEffect(() => {
  const animation = new Animation({ duration: 5000, delay: 2000 });
  animation.animate(element, { name: 'FadeOut' });
}, []);

实现拖放

import { Draggable, Droppable } from '@syncfusion/ej2-base';

useEffect(() => {
  const draggable = new Draggable(document.getElementById('draggable'), { clone: false });
  const droppable = new Droppable(document.getElementById('droppable'), {
    drop: (e) => {
      e.droppedElement.textContent = 'Dropped!';
    }
  });
}, []);