document.getElementById() 相当于 React 2020

Question

我有一个名为 Button.js 的组件，它有一个按钮，当我单击该按钮时，我只是想知道我是否正在访问另一个名为 Timer.js 的组件中的 div。在 vanilla javascript 中，我会简单地使用 document.getElementById() 来捕获 DOM 节点。这在 React 中是如何完成的？

我在 docs 中遇到了回调引用，但它不起作用。如果使用 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

我不会使用引用来检查一个组件是否在另一个组件内部呈现。您可以使用 createContext 和 useContext.

获得您想要的东西

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

在上下文中：您在计时器组件中创建了一个 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>

更新 15.04.2020

起初我不清楚这个问题，但现在我明白了用例。我们的想法是拥有一个 Editor 组件，您可以在其中编写可用于生成复制的代码段视图 and/or 和 html 标记输出的标记。

为此，最好的方法是使用对 Editor 组件的引用，并将其作为 prop 传递给 preview/output 组件——也可以使用上下文，但传递它更容易。

如下Sandbox.

document.getElementById() 相当于 React 2020

document.getElementById() equivalent in React 2020

getelementbyid

reactjs

use-ref