时间戳

首页 > 解决方案 > React 2020 中的 document.getElementById() 等效项

reactjs - React 2020 中的 document.getElementById() 等效项

问题描述

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

我在文档中遇到了回调引用，但它不起作用。如果使用 ref 不是访问 DOM 元素的 React 方式，请向我推荐执行此操作的最佳方式。提前致谢。

按钮.js

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

计时器.js

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

标签： reactjsgetelementbyiduse-ref

解决方案

我不会使用引用来检查一个组件是否在另一个组件内呈现。createContext你可以用and得到你想要的东西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>

更新 15.04.2020

起初我并不清楚这个问题，但现在我理解了这个用例。这个想法是有一个Editor组件，您可以在其中编写可用于生成复制的片段视图和/或 html 标记输出的标记。

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

就像在下面的Sandbox中一样。

推荐阅读