[React 2020中的等效document.getElementById（）等价物

Question

我有一个名为Button.js的组件，该组件具有一个按钮，当单击该按钮时，我只是想知道我是否正在访问另一个名为Timer.js的组件中的div。在普通javascript中，我将仅使用document.getElementById（）来捕获DOM节点。在React中如何完成？

我在docs中遇到了callback-refs，但它不起作用。如果使用ref并不是访问DOM元素的React方法，请向我介绍最佳方法。预先感谢。

Button.js

    function Button() {
    const getHtml = () => {
        const node = test.current;
        console.log(node);
    }
return (
         <button onClick={getHtml}>GetHtml</button>
       )
}

Timer.js

function Timer() {
  const test = useRef(null);
  return (
   <div ref={test}>... </div>
   <Button />
}

Answer 1

Ref是方法。试试这个：

import React, { useRef } from "react";

const App = () => {
  const test = useRef(null);

  const getHtml = () => {
    const node = test.current;
    console.log(node);
  };

  return (
    <>
      <div ref={test}>... </div>
      <Button handleClick={getHtml} />
    </>
  );
};

function Button({ handleClick }) {
  return <button onClick={handleClick}>GetHtml</button>;
}

export default App;

Live demo

Answer 2

我不会使用引用来检查组件是否在另一个组件内部呈现。您可以通过createContext和useContext获得所需的内容。

（（它可以像您尝试的那样工作。如果您将ref作为道具传递给按钮，）

具有上下文：您在Timer组件中创建一个TimerContext.Provider，并且在您的按钮中可以使用useContext(TimerContext)检查对象中是否包含预期的键。如果它不存在，则该按钮不在计时器内部。

请查看下面或下面的Codesandbox中的代码段。

//import React, { useContext, createContext } from "react";
//import "./styles.css";

const { useContext, createContext } = React;

const ContainerContext = createContext({
  isInContainer: null
});

const Container = () => {
  return (
    <ContainerContext.Provider value={{ isInContainer: true }}>
      <p>
        In container:
        <Button />
      </p>
    </ContainerContext.Provider>
  );
};

const Button = () => {
  const { isInContainer } = useContext(ContainerContext);
  console.log(isInContainer);
  const isInside = () => {
    alert(isInContainer ? "clicked inside" : "not in container");
  };

  return <button onClick={isInside}>Click me</button>;
};

function App() {
  return (
    <div className="App">
      <Container />
      <Button />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>