是否可以在無狀態React組件中添加/刪除類

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的state 。 因此，直接更改類不是問題，因為提供給該組件的align屬性始終由setState更改。

Answer 3

正如ndonohoe所說，重新渲染后您的更改可能會被撤消。 防止這種情況發生的一種方法是將組件的活動狀態存儲在父組件的狀態中，將其作為prop傳遞給下級，並且還傳遞改變父對象上該活動狀態的方法。 這樣，無狀態子級可以調用有狀態父級的方法，而無需知道該方法在內部如何工作。