Frontender Libs - обзор библиотек JS / CSS

Прямой доступ к DOM-элементам

Метод findDOMNode() в React предоставляет прямой доступ к реальному DOM-узлу компонента. Обычно его применяют в старых компонентах или библиотеках, где нет возможности использовать рефы. Несмотря на удобство, findDOMNode() считается устаревшим из-за ограничений и потенциальных конфликтов с React Strict Mode. Этот метод нельзя использовать в функциональных компонентах и компонентах, созданных с помощью React.forwardRef(). Команда React рекомендует вместо него использовать React.createRef() или хук useRef(), так как они безопаснее и более совместимы с современным подходом React.

Пример:

import React from 'react';
import { findDOMNode } from 'react-dom';

class LegacyComponent extends React.Component {
  componentDidMount() {
    const node = findDOMNode(this);
    node.style.color = 'blue';
  }

  render() {
    return <div>Прямой доступ к DOM!</div>;
  }
}

👉 @sWebDev

www.tg-me.com/us/Frontender Libs обзор библиотек JS CSS/com.sWebDev/3646

1.0K viewsApr 14 at 07:43

Прямой доступ к DOM-элементам

Метод findDOMNode() в React предоставляет прямой доступ к реальному DOM-узлу компонента. Обычно его применяют в старых компонентах или библиотеках, где нет возможности использовать рефы. Несмотря на удобство, findDOMNode() считается устаревшим из-за ограничений и потенциальных конфликтов с React Strict Mode. Этот метод нельзя использовать в функциональных компонентах и компонентах, созданных с помощью React.forwardRef(). Команда React рекомендует вместо него использовать React.createRef() или хук useRef(), так как они безопаснее и более совместимы с современным подходом React.

Пример:

import React from 'react';
import { findDOMNode } from 'react-dom';

class LegacyComponent extends React.Component {
  componentDidMount() {
    const node = findDOMNode(this);
    node.style.color = 'blue';
  }

  render() {
    return <div>Прямой доступ к DOM!</div>;
  }
}

BY Frontender Libs - обзор библиотек JS / CSS