在 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 组件上切换类吗？

原文由 Hiero 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果你想让 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;
}

原文由 Aaron Franco 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

做这个

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 。

原文由 Bikas 发布，翻译遵循 CC BY-SA 3.0 许可协议