React Spring, унаследованный реквизит

Опубликовано: 24 Февраля, 2023

В этой статье мы узнаем об унаследованных реквизитах в 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

Picked

React Spring, унаследованный реквизит

Javascript

Javascript

Javascript

Javascript

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ