时间戳

首页 > 解决方案 > 是否可以使用 React '获取'元素样式并将其渲染到 DOM 上？

javascript - 是否可以使用 React '获取'元素样式并将其渲染到 DOM 上？

问题描述

例如，假设我有一个动态渲染的背景。

如果您检查元素，代码将显示这一点，例如虚拟代码。

<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 元素？而不是在反应中手动输入它？在这些步骤中。

  1. React 使用 gradientFunction 函数渲染代码
  2. 另一个函数获取该函数的输出，即“linear-gradient(117deg, rgb(149, 77, 143), rgb(180, 95, 95))”
  3. 该输出被呈现到页面上。

一个例子来自我的个人项目，一个渐变生成器。我必须手动输入“源代码”部分以动态呈现状态。虽然，如果我能在渲染后从 dom 本身获取代码，我会很高兴。 有问题的图片

标签： javascripthtmlcssreactjs

解决方案

使用useRef Hook和useEffectHook就可以实现。

以下是步骤：

  1. 为您的渐变颜色设置一个状态，以便onChange在颜色元素上将颜色存储在两种颜色的特定状态中。

  2. 在你的组件中使用useRefHook。

    const myGradient = useRef(null);

    ref={myGradient}与显示当前选择的渐变的 div 元素一起使用。

  3. 在useEffect()使用第二个参数作为颜色的状态，以便每当您选择一种新颜色useEffect()时都会被调用。

  4. 然后在你的 useEffect() 里面你可以使用普通的 Javascript 来首先访问myGradientdiv myGradient.current。然后编写逻辑以从中获取样式并将其显示在特定的 div 上。

    类似的东西 myGradient.current.textContent = linear-gradient(117deg,${color1},${color2}); // 我在这里从头到尾使用模板linear-gradient文字)

推荐阅读