React Spring, унаследованный реквизит
В этой статье мы узнаем об унаследованных реквизитах в React Spring. React spring — это библиотека анимации, которая упрощает анимацию элементов пользовательского интерфейса. Он основан на физике пружины, которая помогает ему достичь естественного внешнего вида. Он отличается от других анимационных библиотек, где кто-то должен иметь дело с кривыми, замедлением и продолжительностью времени, и все они синхронизированы друг с другом.
Платформы: React Spring — это кроссплатформенная библиотека, она поддерживает React, React-Native, Web и многие другие платформы. Он также имеет поддержку для всех браузеров.
Унаследованные реквизиты: этот реквизит всегда объединяется с копией объекта реквизита, в котором он был определен.
Синтаксис:
useSpring({ from: { ... }, to: { ... }, delay: 100, onRest: () => ... })
Шаги для создания приложения React:
Шаг 1: Создайте новое приложение, используя следующую команду.
npx create-react-app reactspringdemo
Шаг 2: Теперь переместите созданную папку проекта с помощью следующей команды.
cd reactspringdemo
Шаг 3: Установите библиотеку React Spring.
npm install react-spring
Структура проекта:
Пример 1. В приведенном ниже коде мы будем использовать указанные выше переменные для демонстрации унаследованных реквизитов.
Имя файла: GFG.jsx
Javascript
import React from "react" ; import { useSpring, animated } from "react-spring" function InheritedProps() { const styles = useSpring({ from: { x: 0 }, config: { duration: 1000 }, loop: { x: 100, }, }) return ( <animated.div style={{ width: 80, height: 80, margin: 200, backgroundColor: "green" , borderRadius: 16, ...styles, }} /> ) } export default InheritedProps; |
App.js
Javascript
import React from "react" import GFG from "./GFG" function App() { console.log( "hello" ) return ( <> <GFG /> </> ); } export default App; |
Шаг для запуска приложения: Откройте терминал и введите следующую команду.
npm start
Вывод: в приведенном выше примере вы можете видеть, что объект перемещается только один раз, а затем останавливается, потому что свойство никогда не было унаследовано.
Пример 2. В приведенном ниже коде мы будем использовать указанные выше переменные для демонстрации унаследованных реквизитов.
Имя файла: GFG.jsx
Javascript
import React from "react" ; import { useSpring, animated } from "react-spring" /* Define the style for the animation using the useSpring hook */ function InheritedProps() { const styles = useSpring({ loop: { reverse: true }, from: { x: 0 }, to: { x: 100 }, config: { duration: 1000 }, }) /* Animated div is the extended version of div that accepts the properties defined above. */ return ( <animated.div style={{ width: 80, height: 80, backgroundColor: "green" , borderRadius: 16, ...styles, }} /> ) } export default InheritedProps; |
Имя файла: App.js
Javascript
import React from "react" import GFG from "./GFG" function App() { console.log( "hello" ) return ( <> <GFG /> </> ); } export default App; |
Имя файла: index.html
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" /> < link rel = "icon" href = "%PUBLIC_URL%/favicon.ico" /> < meta name = "viewport" content = "width=device-width, initial-scale=1" /> < meta name = "theme-color" content = "#000000" /> < meta name = "description" content = "Web site created using create-react-app" /> < link rel = "apple-touch-icon" href = "%PUBLIC_URL%/logo192.png" /> < link rel = "manifest" href = "%PUBLIC_URL%/manifest.json" /> < title >React App</ title > </ head > < body > < noscript > You need to enable JavaScript to run this app. </ noscript > < center > < h1 style = "color: green;" >GeeksforGeeks</ h1 > < h3 >A computer science portal for geeks</ h3 > < h2 >React Spring Inherited Props</ h2 > < div id = "root" ></ div > </ center > </ body > </ html > |
Выход:
Ссылка: https://react-spring.dev/common/props#inherited-props