Можно ли "захватить" стиль элементов с помощью React и отобразить его в DOM?

#javascript #html #css #reactjs

#javascript #HTML #css #reactjs

Вопрос:

Например, допустим, у меня есть динамически отображаемый фон.

Если вы проверите элемент, код покажет это, например, фиктивный код.

 <div id="sectionHere" style="background: linear-gradient(117deg, rgb(149, 77, 143), rgb(180, 95, 95))">

Но в моем редакторе кода, с React, это было бы похоже:

 <div id="sectionHere" style="{gradientFunction}">

Градиентная функция будет:

 const gradientFunction  = {
background: linear-gradient(117deg, rgb(149, 77, 143), rgb(180, 95, 95))
}

Опять же, фиктивный текст, но я надеюсь, что вы поняли идею.

Допустим, я хотел отобразить необработанный html-код на странице, чтобы продемонстрировать код и результаты, эту конкретную строку кода в первом фрагменте кода

 background: linear-gradient(117deg, rgb(149, 77, 143), rgb(180, 95, 95))

Есть ли какой-нибудь способ извлечь это из dom и преобразовать в элемент react? вместо того, чтобы вводить его вручную в react? что-то вроде этих шагов.

React выводит код с помощью функции gradientFunction
Другая функция захватывает выходные данные этой функции, которая является «линейно-градиентной (117 градусов, rgb (149, 77, 143), rgb (180, 95, 95))».
Этот вывод отображается на странице.

Один пример взят из моего личного проекта, генератора градиентов. Я должен вручную ввести раздел «исходный код» для динамического отображения с состоянием. Хотя мне бы хотелось, если бы я мог просто захватить код из самого dom после его визуализации.

1. Это в значительной степени выполнимо 🙂 Могу ли я взглянуть на ваш код. Вы можете поделиться ссылкой codesandbox 🙂

2. Там 🙂 codesandbox.io/s/vigorous-leftpad-4xif5?file=/src/App.js

3. Это не показывает ничего из вашего кода, мой друг 🙂 Сохраните его один раз 🙂

Ответ №1:

useRef Hook useEffect Это может быть достигнуто с помощью и Hook.

Вот шаги:

Установите состояние для ваших градиентных цветов, чтобы onChange в элементе color цвет сохранялся в определенном состоянии для обоих цветов.
Используйте useRef Hook в вашем компоненте.
```
 const myGradient = useRef(null);
 
```
Используйте ref={myGradient} с вашим элементом div, который показывает выбранный текущий градиент.
В useEffect() качестве второго аргумента используйте состояние ваших цветов, чтобы всякий раз, когда вы выбираете новый цвет useEffect() , вызывался.
Затем внутри вас useEffect() вы можете использовать обычный Javascript, чтобы сначала получить доступ к myGradient div myGradient.current . Затем напишите свою логику, чтобы получить из нее стиль и показать его в конкретном div.
Что-то вроде myGradient.current.textContent = linear-gradient(117deg,${color1},${color2}) ; // Я использую шаблонные литералы здесь от начала linear-gradient до конца )