如何在reactjs中将类切换到div元素？答案

【问题标题】：How to toggle class to a div element in reactjs?如何在reactjs中将类切换到div元素？
【发布时间】：2018-12-01 16:19:56
【问题描述】：

我是 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;
    }
 }

【问题讨论】：

你能解释一下为什么你不使用核心反应部分，比如state和props吗？在 componentDidMount 方法中使用 React.Render 非常少见。我认为 React 鼓励响应式编程。

标签： javascript html css reactjs

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案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>

【讨论】：