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

Question

我正在尝试构建一个下拉菜单。基本结构Test是我需要使用 Reactref和styled-components.这是代码：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 的传统方式。
他们不建议使用它：

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

注意：如果您当前正在使用 this.refs.textInput 来访问引用，我们建议您改用回调模式或 createRef API。

使用React.createRef()，
并且您可以使用currentref 变量的属性来访问它，如下所示：

class Test extends React.Component {

  constructor() {

     super(props);

    

     this.selectorRef = React.createRef(null);

  }

  componentDidMount() {

    document.addEventListener("mousedown", this.handleClickOutside);

  }

  componentWillUnmount() {

    document.removeEventListener("mousedown", this.handleClickOutside);

  }

  handleClickOutside = event => {

    console.log(this.selectorRef.current);

  }

  handleClickInside = () => {

    alert("Clicked inside")

  }

  render = () => {

    return (

      <ThemeProvider theme={theme}>

        <Container disabled={disabled}>

          <SelectorDiv

            onClick={this.handleClickInside}

            ref={selectorRef}

          >

            <h1>This is the content to click</h1>

          </SelectorDiv>

        </Container>

      </ThemeProvider>

    );

  };

}

export default Test;

在沙盒上检查一下

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