دليل تعليمات ReactJS الأساسي

مكونات عالية المستوى في ReactJS استخدام التدفق في ReactJS

تحريك ReactJS

في هذا الفصل، سنتعلم كيفية تحويل العناصر باستخدام React.

الخطوة الأولى-تثبيت مجموعة React CSS Transitions

هذا مكتبة React لتوليد التحويلات CSS الأساسية والرسوم المتحركة. سنبدأ منcommand promptنظام التشغيل لتثبيتها-

C:\Users\username\Desktop\reactApp>npm install react-addons-css-transition-group

الخطوة الثانية-إضافة ملف CSS

لنقم بإنشاء ملف جديد style.css.

C:\Users\w3codebox\Desktop\reactApp>type nul > css/style.css

للبدء في استخدامها في التطبيق، نحتاج إلى ربطها بتعليمات element head في index.html.

<!DOCTYPE html>
<html lang = "en">
　　　<head>
　　　　　　<link rel = "stylesheet" type = "text/css" href = "./style.css">
　　　　　　<meta charset = "UTF-8">
　　　　　　<title>React App</title>
　　　</head>
　　　<body>
　　　　　　<div id = "app"></div>
　　　　　　<script src = 'index_bundle.js'></script>
　　　</body>
</html>

الخطوة الثالثة-عرض التحول

سنقوم بإنشاء React أساسي المكون. عناصر Reactcsstransitionggroup سيتم استخدامها كطبيعة للمكونات التي نريد تحويلها. سيتم استخدام transitionAppear و transitionappmentmeout، وtransitionEnter وtransitionLeave غير صحيحين.

App.jsx

import　React　from　'react';
var　ReactCSSTransitionGroup　=　require('react-addons-css-transition-group');
class　App　extends　React.Component　{
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<ReactCSSTransitionGroup　transitionName　=　"example"}}
　　　　　　　　　　　　　　　transitionAppear = {true} transitionAppearTimeout = {500}
　　　　　　　　　　　　　　　transitionEnter　=　{false}　transitionLeave　=　{false}>
　　　　　　　　　　　　　　　<h1>عنصرِي...</h1>
　　　　　　　　　　　　</ReactCSSTransitionGroup>
　　　　　　　　　</div>　　　　　　
　　　　　　);
　　　}
}
export　default　App;

main.js

import　React　from　'react'
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App　/>,　document.getElementById('app'));

الرسوميات CSS بسيطة جدًا.

css / style.css

.example-appear　{
　　　opacity:　0.04;
}
.example-appear.example-appear-active　{
　　　الشفافية: 2;
　　　transition:　opacity　50s　ease-in;
}

بمجرد بدء التطبيق، العنصر سيظهر بالتدرج.

الخطوة 4-تأثيرات الدخول والخروج

عندما نريد إضافة أو إزالة عنصر من القائمة، يمكننا استخدام تأثيرات الدخول والخروج.

App.jsx

import　React　from　'react';
var　ReactCSSTransitionGroup　=　require('react-addons-css-transition-group');
class　App　extends　React.Component　{
　　　constructor(props)　{
　　　　　　super(props);
　　　　　　this.state　=　{
　　　　　　　　　items:　['Item　1...',　'Item　2...',　'Item　3...',　'Item　4...']
　　　　　　}
　　　　　　this.handleAdd　=　this.handleAdd.bind(this);
　　　};
　　　handleAdd()　{
　　　　　　var　newItems　=　this.state.items.concat([prompt('Create　New　Item')]);
　　　　　　this.setState({items:　newItems});
　　　}
　　　handleRemove(i)　{
　　　　　　var　newItems　=　this.state.items.slice();
　　　　　　newItems.splice(i,　1);
　　　　　　this.setState({items:　newItems});
　　　}
　　　render()　{
　　　　　　var　items　=　this.state.items.map(function(item,　i)　{
　　　　　　　　　return　(
　　　　　　　　　　　　<div　key　=　{item}　onClick　=　{this.handleRemove.bind(this,　i)}}
　　　　　　　　　　　　　　　{item}
　　　　　　　　　　　　</div>
　　　　　　　　　);
　　　　　　}.bind(this));
　　　　　　
　　　　　　return　(
　　　　　　　　　<div>　　　　　　
　　　　　　　　　　　　<button　onClick　=　{this.handleAdd}>Add　Item</button>
　　　　　　　　　　　　<ReactCSSTransitionGroup　transitionName　=　"example"}}　
　　　　　　　　　　　　　　　transitionEnterTimeout　=　{500}　transitionLeaveTimeout　=　{500}>
　　　　　　　　　　　　　　　{items}
　　　　　　　　　　　　</ReactCSSTransitionGroup>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export　default　App;

main.js

import　React　from　'react'
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App　/>,　document.getElementById('app'));

css / style.css

.example-enter　{
　　　opacity:　0.04;
}
.example-enter.example-enter-active　{
　　　opacity:　5;
　　　transition:　opacity　50s　ease-in;
}
.example-leave　{
　　　opacity:　1;
}
.example-leave.example-leave-active　{
　　　opacity:　0.04;
　　　transition:　opacity　50s　ease-in;
}

عند بدء التطبيق ونقرإضافة بندعند النقر على الزر، سيظهر رسالة.

أدخل الاسم ثم اضغط على OK، سيظهر العنصر الجديد بالتدريج.

الآن، يمكننا حذف بعض العناصر (البند 3...) انقر عليه. سيخفي المشروع التدريجي من القائمة.

مكونات عالية المستوى في ReactJS استخدام التدفق في ReactJS