Альтернатива document.querySelector в react js

Question

Я написал много статей об использовании useRef в react js. Согласно документации react js , Refs provide a way to access DOM nodes or React elements created in the render method..
Из всей документации я понял, что если вы хотите получить доступ к элементу dom, вам нужно добавить ссылку следующим образом:
<div ref={myRef}, и после этого легко получить к нему доступ.
Я понял что useRef используется, когда у нас есть доступ к разметке html.

Вопрос : Как получить доступ к селектору css (.class, #id), когда мой html генерируется библиотекой типа AntD или чем-то еще?
Как получить доступ к этому селектору, если я не могу использовать document.querySelector согласно документации по реакции? Пример:

 document.querySelector('my selector').style.color = 'yellow';

Какая альтернатива последнему фрагменту кода в реакции? js?

ПРИМЕЧАНИЕ : Я не хочу измените стили с помощью css, но мне нужно изменить его в соответствии с некоторыми js logi c.

Answer 1

Вы можете использовать querySelector и querySelectorAll в ситуациях, когда структура DOM, к которой вы обращаетесь, генерируется вне React. Это абсолютно нормально, когда у вас нет другого выбора.

Вы, вероятно, использовали бы их на самом внешнем элементе вашего компонента или на элементе, в котором у вас есть lirbray не-React, который делает свое дело (что вы ' d получить через ссылку), а не на document, так что они работают только внутри вашей компонентной части DOM, а не всего документа. Вот пример:

"use strict";
const { useState, useEffect, useRef } = React;

// A stand-in for your non-React library
function nonReactLibraryFunction(element, value) {
    element.innerHTML =
        `<div>
            This is content from the non-React lib, value =
            <span class="value">${value}</span>
        </div>`;
}

// A stand-in for your component
const Example = ({value}) => {
    // The ref for the wrapper around the lib's stuff
    const fooRef = useRef(null);

    // When `value` changes, have the library do something (this
    // is just an example)
    useEffect(() => {
        // Valid target?
        if (fooRef.current) {
            // Yes, let the lib do its thing
            nonReactLibraryFunction(fooRef.current, value);

            // Find the element we want to change and change it
            const color = value % 2 === 0 ? "blue" : "red";
            fooRef.current.querySelector(".value").style.color = color;
        }
    }, [value]);

    return (
        <div>
            This is my component, value = {value}.
            <div ref={fooRef} />
        </div>
    );
};

// A wrapper app that just counts upward
const App = () => {
    const [value, setValue] = useState(0);

    useEffect(() => {
        setTimeout(() => setValue(v => v + 1), 800);
    }, [value]);

    return <Example value={value} />;
};

ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.development.js"></script>

Answer 2

В дополнение к предыдущим анонсерам: если этот сгенерированный html сгенерирован внутри вашего компонента, вы можете использовать querySelector на useRef.current для поиска элемента только внутри компонента;)

const Component = () => {
  const componentRef = useRef(null);

  useEffect(() => {
    const elFromLibraryComponent = componentRef.current.querySelector('my selector');

    if (elFromLibraryComponent) {
       ...do something...
    }
  }, [])

  return (
    <div ref={componentRef}>
      <ComponentFromLibrary />
    </div>
  )
}

Есть даже библиотеки что позволяет передавать ref в качестве опоры компонентам, поэтому это также полезно

Answer 3

Мы также можем управлять HTML элементом Dom по тегам, идентификатору, классу с помощью document.getElementsByTag ('TagName'). Document.getElementById ('IdName'), Document.getElementsByClass ('ClassName').

Answer 4

Если вы используете внешние библиотеки, которые генерируют собственную разметку. Ничего плохого в использовании element.querySelector

Вы можете сделать что-то вроде этого:

React.useEffect(() => {
   const element = document.querySelector(selector);
}, []);

Но если вы используете библиотеку из экосистемы React, такую ​​как Antd или material-ui, у них, вероятно, есть API с исх. Он может называться innerRef, nestedRef или просто ref

.