如何在 ReactJS 中定位 DOM 元素？

Question

在我的 React 应用程序中，我有一个侧边栏，当单击侧边栏关闭按钮时，需要添加一个 CSS 类。我正在用来React.createRef()创建对该元素的引用，但是，我收到以下错误：

这是我的代码：

import React from 'react';
import './css/Dashboard.css';

class Dashboard extends React.Component {

    constructor(props) {
        super(props);
        this.sidebar = React.createRef();
    }

    sidebarClose() {
        console.log('test');
        this.sidebar.className += "hidden";
    }

    render() {
        return (
            <div id="dashboard">
                <div ref={this.sidebar} id="sidebar">
                    <img width="191px" height="41px" src="logo.png"/>
                    <div onClick={this.sidebarClose} className="sidebar-close">X</div>
                </div>
            </div>
        );
    }
}

export default Dashboard;

这console.log('test')只是为了让我可以确认该函数正在执行（确实如此）。

谢谢。

Answer 1

您可以在状态中保留一个变量来指示侧边栏是否打开，并在单击按钮时更改该变量的值，而不是手动尝试将类添加到 DOM 节点。

然后，您可以使用此状态变量来决定是否应为侧边栏指定该类hidden。

例子

class Dashboard extends React.Component {
  state = { isSidebarOpen: true };

  sidebarClose = () => {
    this.setState({ isSidebarOpen: false });
  };

  render() {
    const { isSidebarOpen } = this.state;

    return (
      <div id="dashboard">
        <div
          ref={this.sidebar}
          id="sidebar"
          className={isSidebarOpen ? "" : "hidden"}
        >
          <img
            width="191px"
            height="41px"
            src="logo.png"
            alt="craftingly-logo"
          />
          <div onClick={this.sidebarClose} className="sidebar-close">
            X
          </div>
        </div>
      </div>
    );
  }
}