ステートレスレスキューコンポーネントでクラスを追加/削除することはできますか？

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

このステートレスコンポーネントでさえも、親のalignというstateに依存していると思われます。したがって、このコンポーネントに提供されるalignプロパティは、とにかくsetStateによって変更されるため、クラスを直接変更することは問題ありません。

Answer 3

ndonohoe氏によると、あなたの変更は再レンダリング時に元に戻される可能性があります。これを防止する1つの方法は、コンポーネントのアクティブな状態を親コンポーネントの状態に保存し、それを小道具として渡し、そのアクティブな状態を親に変更するメソッドを渡すことです。このようにして、ステートレスな子はステートフルな親のメソッドを、そのメソッドが内部的にどのように動作するかを知らなくても呼び出すことができます。