如何正确使用 ref 与 React 类组件和样式组件？

Question

我正在尝试构建一个下拉菜单。基本结构Test是我需要使用 Reactref和styled-components.

我已经检查了 SO 中的相关文章，但它们使用了我的类组件不支持的钩子。

这是代码：

import React from "react";
import PropTypes from "prop-types";
import styled, { ThemeProvider } from "styled-components";

import { theme } from "../theme";

import Icon from "../Icon";

const Container = styled.div`
  display: flex;
`};

const SelectorDiv = styled.div`
  background-color: black;
  color: white;
  height: 100px;
`;

class Test extends React.Component {
  componentDidMount () {
    document.addEventListener("mousedown", this.handleClickOutside);
  }

  componentWillUnmount () {
    document.removeEventListener("mousedown", this.handleClickOutside);
  }

  handleClickOutside = event => {
    console.log(this.refs); // undefined
  }


  handleClickInside = () => {
    alert("Clicked inside");
  }

  render = () => {

    return (
      <ThemeProvider theme={theme}>
        <Container disabled={disabled}>
          <SelectorDiv
            onClick={this.handleClickInside}
            ref={"wrapper"}
          >
            <h1>This is the content to click</h1>
          </SelectorDiv>
        </Container>
      </ThemeProvider>
    );
  };
}
export default Test;

ref 不是工作属性。当点击区域之外时，我正在undefined继续this.refs。发现styled-components有问题，但在 V4 上已解决（我使用的是 V5.1.0）。

如何将包装组件放入我的handleOutsideClick？

Answer 1

正如您所尝试的那样，使用 ref 作为字符串是 React 旧 API 的传统方式。
\n他们不建议使用它：

\n

\n

如果您以前使用过 React，您可能会熟悉旧的 API，其中 ref 属性是一个字符串，如“textInput”，并且 DOM 节点通过 this.refs.textInput 进行访问。我们建议不要这样做，因为字符串引用存在一些问题，被认为是遗留问题，并且可能会在未来的版本之一中被删除。

\n

注意：如果您\xe2\x80\x99 当前使用 this.refs.textInput 来访问引用，我们\n建议使用回调模式或 createRef API\n。

\n

\n

使用React.createRef()代替，
你可以通过以下方式访问它currentref 变量的属性来访问它，如下所示：

\n

\n\n\nclass Test extends React.Component {\n  constructor() {\n     super(props);\n    \n     this.selectorRef = React.createRef(null);\n  }\n\n  componentDidMount() {\n    document.addEventListener("mousedown", this.handleClickOutside);\n  }\n\n  componentWillUnmount() {\n    document.removeEventListener("mousedown", this.handleClickOutside);\n  }\n\n  handleClickOutside = event => {\n    console.log(this.selectorRef.current);\n  }\n\n\n  handleClickInside = () => {\n    alert("Clicked inside")\n  }\n\n  render = () => {\n\n    return (\n      <ThemeProvider theme={theme}>\n        <Container disabled={disabled}>\n          <SelectorDiv\n            onClick={this.handleClickInside}\n            ref={selectorRef}\n          >\n            <h1>This is the content to click</h1>\n          </SelectorDiv>\n        </Container>\n      </ThemeProvider>\n    );\n  };\n}\nexport default Test;\n

\n

在沙盒上检查一下

\n

在功能组件中你可以使用React hookuseRef()

\n

Refs 和 Dom
\n useRef

\n