在无状态反应组件中 add/remove 类可以吗

Question

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

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;

Answer 1

如果您不担心存储的状态，那么您可以让它保持无状态状态。但是，如果您的 props 发生变化，组件有可能会被重新绘制，此时您将失去它的 "state" 并且组件似乎会重置。

Answer 2

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

Answer 3

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

在无状态反应组件中 add/remove 类可以吗

Is it okay to add/remove classes in stateless react component

javascript

stateless

reactjs

在无状态反应组件中 add/remove 类 可以吗

Is it okay to add/remove classes in stateless react component

javascript

stateless

reactjs

在无状态反应组件中 add/remove 类可以吗