时间戳

首页 > 解决方案 > 如何在reactjs中将类切换到div元素？

javascript - 如何在reactjs中将类切换到div元素？

问题描述

我是 reactjs 的新手，我无法在点击事件上切换 div 元素的类。

我想要实现的是下面，

我有一个动态创建的 div 元素，如下所示，

constructor(props) {
    super(props);
    this.element = document.createElement('div');
    this.element.className = 'div_class';
}

我在组件安装和卸载上添加和删除 div 元素，如下所示，

componentDidMount() {
    notifications_root.appendChild(this.element);
    ReactDOM.render(<SvgSome onClick={this.handle_dialog_close} width="36" 
    style={{position:'absolute',cursor: 'pointer', right: '250px', top: 
    '105px'}} />, this.element);
}

componentWillUnmount() {
    this.element.classList.remove('hidden');
    root.removeChild(this.element);
}

handle_dialog_close = () => {
    this.element.classList.add('hidden');
};

此外，我在单击 svg 元素时向 div 元素添加和删除类“隐藏”。但是，它确实在单击 svg 元素时隐藏了 div 元素，但没有再次显示 div 元素......我猜 div 元素类设置为隐藏它不会显示。有人可以帮我知道问题出在哪里。下面是css代码。谢谢。

.div_class {
    width:800px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
    margin-top: 100px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    &.hidden {
        display: none;
    }
 }

标签： javascripthtmlcssreactjs

解决方案

您可以做的一件事是创建一个变量（如果您想要更多类，则创建一个数组），然后有条件地添加。

Render(){
Const divClasses =[‘My-Div’, ‘Container’]

Return(
<div className=
{/*condition*\ && divClasses>
//content
</div>
)
}

因此，将根据条件添加类。此外，您可以添加一个处理程序来控制条件。

推荐阅读