Как использовать Typescript Transform с React

В моем приложении React есть компонент, который требует от меня использования свойства style transform. Когда я это сделал, мой компонент добавил ссылку на Typescript Transform, и теперь при компиляции приложения я получаю следующее предупреждение:

./node_modules/typescript/lib/typescript.js
Critical dependency: the request of a dependency is an expression

Вот ссылка в верхней части моего компонента:

import { transform } from "typescript";

И вот часть рассматриваемого мной компонента:

<div className = {`dropdown-menu dropdown-menu-right border py-0 ${isVisible && " show"}`} 
    style = {{position: "absolute", transform: "translate3d(584px, 39px, 0px)", 
    top:0, left:0, willChange: transform}}>
    <div className = "bg-white py-2">
        <span className = "dropdown-item">Display temp in</span>
        <div className = "dropdown-divider"></div>
        <a className = "dropdown-item" href = "#!" 
            onClick = {() => setMetric(true)}>Fahrenheit &#8457;</a>
        <a className = "dropdown-item" href = "#!" 
            onClick = {() => setMetric(false)}>Celsius &#8451;</a>
    </div>
</div>

В частности: transform: "translate3d(584px, 39px, 0px)" в моей опоре style.

Я не совсем понимаю, почему это происходит. Мне вообще для этого нужен Typescript? Если да, то как решить эту проблему?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
25
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Значение атрибута css willChange должно быть строкой:

willChange: "transform"

Удалите эту строку: import { transform } from "typescript";

Спасибо! Это исправило это для меня.

scapegoat17 31.03.2021 14:55

Другие вопросы по теме