1

我有一个名为 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 />
}
4

1 回答 1

2

我不会使用引用来检查一个组件是否在另一个组件内呈现。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中一样。

于 2020-03-29T01:16:43.403 回答