如何正确使用 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()