可以在无状态反应组件中添加/删除类吗答案

【问题标题】：Is it okay to add/remove classes in stateless react component可以在无状态反应组件中添加/删除类吗
【发布时间】：2017-03-03 15:57:48
【问题描述】：

我有一个像手风琴一样的无状态组件。单击容器 div 时，我会在一些子组件上切换几个 css 类。可以直接更改 dom 中的类，还是应该将这个无状态组件转换为有状态组件并通过状态处理类切换？

import React, {PropTypes} from "react"

const Accordian = ({children,label,align}) => {
    return(
            <div class={"accordian-tab " + (align === "left" ? "accordian-tab-left" : "")} onClick={
                (e) => {
                    e.target.parentNode.getElementsByClassName("panel")[0].classList.toggle("show");
                    e.target.parentNode.getElementsByClassName("accordion")[0].classList.toggle("active");
                }
            }>
                <button class="accordion">{label}<i class="material-icons arrow-icon">keyboard_arrow_down</i></button>
                <div class="panel">
                    {children}
                </div>
            </div>
    )
}

Accordian.propTypes = {
    label: PropTypes.string.isRequired
}

export default Accordian;

【问题讨论】：

嗯...我认为没关系。

标签： javascript reactjs stateless

【解决方案1】：

如果您不担心被存储的状态，那么您应该将其保持为无状态。但是，如果您的 props 发生更改，组件可能会被重绘，此时您将失去其“状态”并且组件似乎会重置。

【讨论】：

【解决方案2】：

我想，即使这个无状态组件也依赖于其父级中名为 align 的 state。因此，直接更改类不是问题，因为提供给该组件的align 属性无论如何都会被setState 更改。

【讨论】：

【解决方案3】：

正如 ndonohoe 所说，您的更改可能会在重新渲染时撤消。防止这种情况发生的一种方法是将组件的活动状态存储在父组件的状态中，将其作为 props 传递，并传递一个更改父组件活动状态的方法。这样，无状态子进程就可以调用有状态父进程的方法，而无需知道该方法在内部是如何工作的。

【讨论】：