在 React 中使用 Ref 更改元素的样式

Using a Ref to change an Element’s style in React

在 React 中使用 ref 改变元素的样式：

ref在元素上设置道具。
current通过ref 上的属性访问元素。
更新元素的样式，例如
ref.current.style.backgroundColor = 'green'.

应用程序.js


import {useRef} from 'react';

const App = () => {
  const ref = useRef();

  const handleClick = () => {
    ref.current.style.backgroundColor = 'salmon';
    ref.current.style.color = 'white';
    ref.current.style.padding = '2rem';
    ref.current.style.width = '300px';
  };

  return (
    <div>
      <button onClick={handleClick}>Change styles</button>

      <br />
      <br />

      <div ref={ref}>Some content here</div>
    </div>
  );
};

export default App;

反应集参考风格

我们使用useRef钩子来创建一个我们可以用来访问 DOM 元素的对象。

useRef()钩子可以传递一个初始值作为参数。该钩子返回一个可变的 ref 对象，其.current属性被初始化为传递的参数。

请注意，我们必须访问currentref 对象上的属性才能访问我们设置prop的div元素。 ref

当我们将 ref prop 传递给元素时，例如<div ref={myRef} />，React 将.currentref 对象的属性设置为相应的 DOM 节点。

我们可以访问元素的
style
属性来获取元素样式的对象。

该style属性可用于在 DOM 元素上设置样式或读取元素的现有样式。

请注意，多词属性名称是驼峰式的，例如backgroundColor.

在 React 中使用 ref 来切换元素的样式：

ref在元素上设置道具。
检查元素上是否存在特定样式。
如果设置了样式，请将其删除。否则在元素上设置样式。

应用程序.js


import {useRef} from 'react';

const App = () => {
  const ref = useRef();

  const handleClick = () => {
    if (ref.current.style.backgroundColor) {
      ref.current.style.backgroundColor = '';
      ref.current.style.color = '';
    } else {
      ref.current.style.backgroundColor = 'salmon';
      ref.current.style.color = 'white';
    }
  };

  return (
    <div>
      <button onClick={handleClick}>Change styles</button>

      <br />
      <br />

      <div ref={ref}>Some content here</div>
    </div>
  );
};

export default App;

反应切换参考风格

要使用 ref 来切换样式，我们必须检查元素上是否设置了样式。

如果设置了样式，我们通过将其属性设置为空字符串来将其删除。

否则，我们将样式属性设置为其特定值。

–