React js 中 document.querySelector 的替代方案

Question

我已經紅了很多關於在 React js 中使用useRef的文章。 根據 React js 文檔， Refs provide a way to access DOM nodes or React elements created in the render method. .
從所有文檔中，我了解到，如果你想訪問一個 dom 元素，你必須像這樣添加 ref：
<div ref={myRef} ，然后很容易訪問它。
我知道當我們可以訪問useRef標記時使用 useRef。

問題：當我的 html 是由庫生成時，如何訪問 css 選擇器 ( .class, #id )，例如 AntD 或其他？
如果我無法根據 React 文檔使用document.querySelector ，如何訪問此選擇器？ 前任：

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

React js 中最后一個代碼片段的替代方案是什么？

注意：我不想將 styles 更改為 css，但我需要根據一些 js 邏輯更改它。

Answer 1

在您訪問的 DOM 結構是在 React 之外生成的情況下，您可以使用querySelector和querySelectorAll 。 當您別無選擇時，這絕對沒問題。

您可能會在組件的最外層元素或您讓非 React lirbray 執行其操作的元素（您將通過 ref 獲得）上使用它們，而不是在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

如果您使用生成自己的標記的外部庫。 使用element.querySelector沒什么不好

你可以這樣做：

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

但是如果你使用來自 React 生態系統的庫，如 Antd 或 material-ui，他們可能有一個 API 和 refs。 它可以被稱為innerRef ， nestedRef或只是ref

Answer 3

除了以前的答案：如果在您的組件內部生成了這個生成的 html，您可以在useRef.current上使用 querySelector 來僅在組件內部搜索元素；）

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 作為 prop 傳遞給組件，因此它也很有用

Answer 4

如果您使用多個外部資源來生成標記。 嘗試這個：

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

Answer 5

我們還可以在 document.getElementsByTag('TagName').Document.getElementById('IdName'),Document.getElementsByClass('ClassName') 的幫助下，通過標簽、id、class 操作 HTML Dom 元素。