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

前端开发 4月前 391

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

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

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>
  );
};

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

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

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

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

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

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

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

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

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

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

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;