Question

我有一个像手风琴一样的无状态组件。单击容器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;

Answer 1

如果您不担心存储状态，那么您可以将其置于无状态。但是，如果你的道具发生变化，有可能会重新绘制组件，此时你会失去“状态”，组件似乎会重置。

Answer 2

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

Answer 3

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

是否可以在无状态反应组件中添加/删除类

3 个答案: