JIYIK CN >

Using ref in React to change the style of an element:

1. Sets the attribute on the element ref.
2. The element is accessed through the attribute on the ref current.
3. Updates the style of an element, ref.current.style.backgroundColor = 'green'e.g.

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

We use useRefhooks to create an object that we can use to access DOM elements.

useRef()The hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .currentattributes are initialized to the passed argument.

请注意, we have to access the current property of the ref object in order to access the div element on which we set the ref attribute.

When we pass a ref prop to an element, for example <div ref={myRef} />, React sets the ref object’s .current property to the corresponding DOM node.

We can access the style property of an element to get an object of the element's style.

The style attribute can be used to set styles on a DOM element or to read an element's existing style.

请注意, multi-word attribute names are camelCase, for example backgroundColor .

Use ref in React to toggle the style of an element:

1. Set the ref attribute on the element.
2. Checks if a specific style exists on an element.
3. If the style is set, remove it. Otherwise set the style on the element.

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;

To toggle a style using a ref, we have to check if the style is set on the element.

If the style is set, we remove it by setting its property to an empty string. Otherwise, we set the style property to its specific value.