在 React 应用程序中，如何在样式化组件上使用 .contains()？

Question

我有这个点击处理程序：

clickHandler = event => {
    if (this.node.contains(event.target)) {
        console.log("clicked inside");
        return;
    }
    console.log("clicked outside");
};

我的 List 组件是这样定义的；

const List = styled.ul`
  margin: 0;
  padding: 5px 0;
  list-style: none;
  border-top: 1px solid #789;
  color: black;
  font-weight: 500;
`;

然后在我的渲染函数中我有这个；

<List ref={node => (this.node = node)} key={index}>

当我的点击处理程序被执行时，我得到以下错误：

TypeError: _this.node.contains 不是函数

如果我控制台记录 this.node 我可以看到它是一个样式组件，但它没有 ref 也没有 innerRef 属性，所以我看不到如何访问底层节点元素以便我可以使用.contains()

这就是我在 package.json 中的内容：

"styled-components": "^3.4.5",

Answer 1

当您将ref 传递给您的样式组件时，您应该仍然能够访问内部节点元素。下面我们将使用clickHandler 作为对窗口事件监听器的回调。

工作沙盒：https://codesandbox.io/s/amazing-surf-kivtr

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import "./styles.css";

const List = styled.div`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

class App extends React.Component {
  node = null;

  componentDidMount() {
    window.addEventListener("click", this.clickHandler);
  }

  clickHandler = event => {
    if (this.node.contains(event.target)) {
      console.log(this.node);
      console.log("clicked inside");
      return;
    }
    console.log("clicked outside");
  };

  render() {
    return (
      <div>
        <List ref={ref => (this.node = ref)}>
          <div>Example</div>
        </List>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);