コンポーネントの状態変更はどちらが良いか?
Q&A
Closed
コンポーネントの状態変化はどのように行えばよいか?
現在Reactを勉強中なのですが、コンポーネントのstyleを変更させたいと思っております。
変更するコードは自体はすぐにできるのですが、最適な方法が分かりません。
例えば以下のように2つの方法で状態変更をさせることができます。
①クリックイベントと関数でstyleを変更する方法
const styleHandler = (e: React.MouseEvent<HTMLInputElement>) => {
e.target.style.border = "dashed"
}
return (
<div onClick={styleHandler}>
<div
className='technology'
>
</div>
</div>
)
②useEffectとuseRefで変更する方法
const [active, setActive] = useState(false)
useEffect(() => {
if(active) {
technologyRef.current.style.border = "dashed"
}
})
return (
<div ref={technologyRef} onClick={() => {setActive(true)}}>
<div
className='technology'
>
</div>
</div>
)
初歩的な悩みかも知れませんが、どちらが良いかをちゃんと判断した上で
使用したいので、どうか皆様のご意見を伺えますと幸いです。
0