在 React 中切换类

Question

我在一个有菜单按钮的项目中使用 react。

<a ref="btn" href="#" className="btn-menu show-on-small"><i></i></a>

还有一个 Sidenav 组件，例如：

<Sidenav ref="menu" />

我编写了以下代码来切换菜单：

class Header extends React.Component {

    constructor(props){
        super(props);
        this.toggleSidenav = this.toggleSidenav.bind(this);
    }

    render() {
        return (
          <div className="header">
            <i className="border hide-on-small-and-down"></i>
            <div className="container">
          <a ref="btn" href="#" className="btn-menu show-on-small"><i></i></a>
          <Menu className="menu hide-on-small-and-down"/>
          <Sidenav />
        </div>
          </div>
        )
    }

    toggleSidenav() {
        this.refs.btn.classList.toggle('btn-menu-open');
    }

    componentDidMount() {
        this.refs.btn.addEventListener('click', this.toggleSidenav);
    }

    componentWillUnmount() {
        this.refs.btn.removeEventListener('click', this.toggleSidenav);
    }
}

问题是this.refs.sidenav 不是 DOM 元素，我无法在他身上添加类。

谁能解释我如何在Sidenav 组件上切换类，就像我在按钮上做的那样？

Answer 1

react 中的切换功能

首先你应该创建构造函数 像这样

constructor(props) {
        super(props);
        this.state = {
            close: true,
        };
    }

然后创建一个这样的函数

yourFunction = () => {
        this.setState({
            close: !this.state.close,
        });
    };

然后像这样使用

render() {
        const {close} = this.state;
        return (

            <Fragment>

                 <div onClick={() => this.yourFunction()}></div>

                 <div className={close ? "isYourDefaultClass" : "isYourOnChangeClass"}></div>

            </Fragment>
        )
    }
}

请给出更好的解决方案

Answer 2

对于任何在 2019 年阅读本文的人，在 React 16.8 发布后，请查看React Hooks。它确实简化了组件中的状态处理。文档写得非常好，并附有您所需要的示例。

Answer 3

如果您希望 React 正确有效地渲染您的 DOM，您必须使用组件的 State 来更新组件参数，例如 Class Name。

更新：我更新了示例以在单击按钮时切换侧边菜单。这不是必需的，但您可以看到它是如何工作的。正如我所展示的，您可能需要使用“this.state”与“this.props”。我习惯使用 Redux 组件。

constructor(props){
    super(props);
}

getInitialState(){
  return {"showHideSidenav":"hidden"};
}

render() {
    return (
        <div className="header">
            <i className="border hide-on-small-and-down"></i>
            <div className="container">
                <a ref="btn" onClick={this.toggleSidenav.bind(this)} href="#" className="btn-menu show-on-small"><i></i></a>
                <Menu className="menu hide-on-small-and-down"/>
                <Sidenav className={this.props.showHideSidenav}/>
            </div>
        </div>
    )
}

toggleSidenav() {
    var css = (this.props.showHideSidenav === "hidden") ? "show" : "hidden";
    this.setState({"showHideSidenav":css});
}

现在，当您切换状态时，组件将更新并更改 sidenav 组件的类名。您可以使用 CSS 使用类名显示/隐藏 sidenav。

.hidden {
   display:none;
}
.show{
   display:block;
}

Answer 4

Ori Drori 的评论是正确的，你没有这样做“反应方式”。在 React 中，最好不要使用 DOM 更改类和事件处理程序。在 React 组件的 render() 方法中执行此操作；在这种情况下，这将是 sideNav 和您的 Header。如何在您的代码中完成此操作的粗略示例如下。

标题

class Header extends React.Component {
constructor(props){
    super(props);
}

render() {
    return (
        <div className="header">
            <i className="border hide-on-small-and-down"></i>
            <div className="container">
                <a ref="btn" href="#" className="btn-menu show-on-small"
                onClick=this.showNav><i></i></a>
                <Menu className="menu hide-on-small-and-down"/>
                <Sidenav ref="sideNav"/>
            </div>
        </div>
    )
}

showNav() {
  this.refs.sideNav.show();
}
}

侧向导航

 class SideNav extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       open: false
     }
   }

   render() {
     if (this.state.open) {
       return ( 
         <div className = "sideNav">
            This is a sidenav 
         </div>
       )
     } else {
       return null;
     }

   }

   show() {
     this.setState({
       open: true
     })
   }
 }

您可以在此处看到，我们不是切换类，而是使用组件的状态来呈现 SideNav。这种方式或类似方式是使用 react 的整个前提。如果您使用的是引导程序，那么有一个库将引导程序元素与反应的处理方式集成在一起，允许您使用相同的元素但在它们上设置状态，而不是直接操作 DOM。可以在这里找到 - https://react-bootstrap.github.io/

希望这会有所帮助，并享受使用 React 的乐趣！

Answer 5

refs 不是 DOM 元素。为了找到一个DOM元素，你需要先使用findDOMNode menthod。

做这个

var node = ReactDOM.findDOMNode(this.refs.btn);
node.classList.toggle('btn-menu-open');

或者，您可以像这样使用（几乎是实际代码）

this.state.styleCondition = false;


<a ref="btn" href="#" className={styleCondition ? "btn-menu show-on-small" : ""}><i></i></a>

然后您可以根据您的状态更改条件更改styleCondition。