Проблема с ключевым словом this в стиле React?

Question

В настоящее время я пытаюсь работать с использованием стилизованных компонентов, но мне трудно создавать компоненты, как обычно.Более конкретно, я получаю сообщение об ошибке с ключевым словом this и передачей свойств.

В моем основном файле JavaScript я пытаюсь создать такой компонент (нормальный для меня):

let newStyledComponent = <HomePageDiv property1 = {property1} ... />

В HomePageDiv.js у меня есть одна константа, которая является div, и одна константа, которая является ключевыми кадрами, которые этот div оживит:

import React from 'react';

import styled, { keyframes } from 'styled-components';

export const HomePageDiv = styled.div`
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    position: absolute;
    overflow: hidden;
    animation: ${backgroundChange} 4s ease-in-out 0s infinite;
`

const backgroundChange = keyframes`
    0%, 100% {
        background: radial-gradient(ellipse at ${this.props.xLeftPercent+`%`} ${this.props.yLeftPercent+'%'}, rgba(${this.leftR + this.leftRStep * 0}, ${this.leftG + this.leftGStep * 0}, ${this.leftB + this.leftBStep * 0}, 0.5), transparent),
                    radial-gradient(ellipse at ${this.props.xRightPercent+`%`} ${this.props.yRightPercent+'%'}, rgba(${this.rightR + this.rightRStep * 0}, ${this.rightG + this.rightGStep * 0}, ${this.rightB + this.rightBStep * 0}, 0.5), transparent);
    }

    ...

    99% {
        ...
    }
`

export default HomePageDiv;

Учитывая это, почему я получаю ошибку:

Uncaught TypeError: Cannot read property 'props' of undefined

И, аналогично, если я уберу ключевое слово "this", я также получу:

Uncaught ReferenceError: props is not defined

Answer 1

Стилизованные компоненты написаны как функциональные компоненты, это означает, что этого нет.Что вы можете сделать, это ${(props) => props.xLeftPercent}.