如何获取对子 dom 元素的引用答案

【问题标题】：How to get reference to child dom element如何获取对子 dom 元素的引用
【发布时间】：2019-12-04 10:24:23
【问题描述】：

我正在尝试实现绑定到子 DOM 元素上的事件的包装器标签，然后根据它们做一些事情。

我有以下代码：


const Wrapper: React.FC = (props) => {
    // How do I get access to child div DOM element here??
    someComponent.eventListenerOn(childDOMElement);

    return <>{props.children}</>;
};

const ChildStuff: React.FC = () => {
    return (
        <Wrapper>
            <div id="xyzzy"></div>
        </Wrapper>
    );
};

在Wrapper 中，我如何访问子 DOM 元素？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你可以用 React ref 做到这一点，尝试在这里查看How do I access refs of a child component in the parent component

以及关于 ref:Refs and the DOM的 React 文档

【讨论】：

【解决方案2】：

您可以使用ref 访问任何 DOM 元素。但是，您需要等到 react 将其更改写入 DOM，然后您才能使用 useEffect 挂钩访问它。以下是使用钩子的方法：

const Wrapper = (props) => {
    const ref = React.useRef(null);

    React.useEffect(() => {
      if (ref.current) {
        // ref.current has the DOM element. Do what you want.
      }
    })

    return <div ref={ref}>{props.children}</div>;
};

const ChildStuff = () => {
  return (
    <Wrapper>
      <div id="xyzzy"></div>
    </Wrapper>
  );
};

【讨论】：

在功能组件中，应该使用useRef而不是createRef
不错的收获。更新了它。对于任何想知道原因的人，请阅读更多关于 createRef vs useRef