Question

我是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元素添加和删除类“ hidden”。但是它确实在单击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;
    }
 }

Answer 1

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

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

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

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

Answer 2

React是一个声明式库。您不需要创建和删除DOM元素。您只需在render方法中使用jsx声明它们。查看一些反应tutorials，了解如何使用反应。

您正在寻找这样的解决方案：

<div className=`div_class ${this.state.hidden ? 'hidden' : ''}`>
  <svg onClick={() => this.setState({hidden: !this.state.hidden})}></svg>
</div>

Answer 3

使用核心JavaScript呢？

如果使用库会使事情变得更难，那就没用了！

function toggleClass(id,classA,classB){ 
   if (document.getElementById(id).classList[0] === classA){
      document.getElementById(id).classList = classB
    }
    else {
      document.getElementById(id).classList = classA
    }
  }

.hidden {display:none}
.show {display:block}

#elem1 {background: blue; width:200px;height:200px;font-size:10rem;text-align:center}

<button onclick="toggleClass('elem1','show','hidden')">Hide/Show</button>

<div id="elem1" class="show">☀</div>

如何在ReactJS中将类切换到div元素？

3 个答案: