Back to Details

syncfusion-react-common

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Common Features in Syncfusion React Components

Syncfusion React组件的通用功能

Syncfusion React components include comprehensive common utilities and features that enhance user experience, ensure cross-cultural support, and provide foundational capabilities across all components. This skill covers installation setup, animations, globalization, state management, and security considerations for building robust React applications.
Syncfusion React组件包含全面的通用工具与功能，可提升用户体验、确保跨文化支持，并为所有组件提供基础能力。本技能涵盖构建健壮React应用所需的安装配置、动画、全球化、状态管理及安全考量。

Table of Contents

目录

Navigation Guide

导航指南

Getting Started & Framework Setup

入门与框架配置

📄 Read: references/getting-started.md
  • Framework integration (Next.js, Remix, Vite, Preact, SharePoint)
  • Package installation and CSS imports
  • Component initialization
  • Quick start examples
📄 阅读: references/getting-started.md
  • 框架集成（Next.js、Remix、Vite、Preact、SharePoint）
  • 包安装与CSS导入
  • 组件初始化
  • 快速开始示例

Globalization

全球化

📄 Read: references/globalization.md
  • Right-to-left (RTL) support for Arabic, Hebrew, Persian languages
  • Localization (l10n) for multi-language support
  • Internationalization (i18n) with CLDR data
  • Number and currency formatting
  • Date and time formatting
📄 阅读: references/globalization.md
  • 对阿拉伯语、希伯来语、波斯语的从右到左（RTL）支持
  • 多语言支持的本地化（l10n）
  • 基于CLDR数据的国际化（i18n）
  • 数字与货币格式化
  • 日期与时间格式化

Advanced Features & Utilities

高级功能与工具

📄 Read: references/advanced-features.md
  • Animation effects (FadeIn, ZoomOut, SlideUp, etc.)
  • Animation timing (duration, delay, global settings)
  • Drag-and-drop interactions (Draggable, Droppable)
  • Template customization and optimization
  • State persistence with enablePersistence
  • Security best practices and HTML sanitization
📄 阅读: references/advanced-features.md
  • 动画效果（FadeIn、ZoomOut、SlideUp等）
  • 动画时序（时长、延迟、全局设置）
  • 拖放交互（Draggable、Droppable）
  • 模板定制与优化
  • 基于enablePersistence的状态持久化
  • 安全最佳实践与HTML清理

Quick Start

快速开始

Install Syncfusion React Package

安装Syncfusion React包

bash
npm install @syncfusion/ej2-react-grids --save
bash
npm install @syncfusion/ej2-react-grids --save

Import Styles

导入样式

css
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-grids/styles/tailwind3.css";
css
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-grids/styles/tailwind3.css";

Register License Key

注册许可证密钥

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

// Call this before initializing any Syncfusion components
registerLicense('Your license key here');
typescript
import { registerLicense } from '@syncfusion/ej2-base';

// Call this before initializing any Syncfusion components
registerLicense('Your license key here');

Basic Component Setup

基础组件配置

typescript
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;
typescript
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;

Common Features

通用功能

Enable State Persistence

启用状态持久化

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

Enable RTL Support

启用RTL支持

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

// Global RTL enablement
enableRtl(true);

// OR per-component
<ListViewComponent enableRtl={true} />
typescript
import { enableRtl } from '@syncfusion/ej2-base';

// Global RTL enablement
enableRtl(true);

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

Add Animation Effects

添加动画效果

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

useEffect(() => {
  const animation = new Animation({ duration: 5000, delay: 2000 });
  animation.animate(element, { name: 'FadeOut' });
}, []);
typescript
import { Animation } from '@syncfusion/ej2-base';

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

Implement Drag-and-Drop

实现拖放功能

typescript
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!';
    }
  });
}, []);
typescript
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!';
    }
  });
}, []);