CSSとReactJSで条件付きにクラスを動的に追加する方法
2024-04-02
ReactJSで手動クラス名に動的にクラスを追加するには、いくつかの方法があります。
方法
- className属性を使う
const MyComponent = () => {
const [active, setActive] = useState(false);
const handleClick = () => {
setActive(true);
};
return (
<button
className={`my-button ${active ? 'active' : ''}`}
onClick={handleClick}
>
Click me
</button>
);
};
この例では、active状態に基づいて動的にactiveクラスを追加しています。
- classList APIを使う
const MyComponent = () => {
const [active, setActive] = useState(false);
const handleClick = () => {
setActive(true);
};
const ref = useRef();
useEffect(() => {
const element = ref.current;
if (active) {
element.classList.add('active');
} else {
element.classList.remove('active');
}
}, [active]);
return (
<button
ref={ref}
onClick={handleClick}
>
Click me
</button>
);
};
- Styled Componentsを使う
import styled from 'styled-components';
const MyButton = styled.button`
&.active {
color: red;
}
`;
const MyComponent = () => {
const [active, setActive] = useState(false);
const handleClick = () => {
setActive(true);
};
return (
<MyButton
onClick={handleClick}
>
Click me
</MyButton>
);
};
この例では、Styled Componentsを使用して、active状態に基づいて動的にスタイルを適用しています。
- シンプルなケースでは、
className属性を使うのが最も簡単です。 - より複雑なケースでは、
classListAPIを使うのがより柔軟性があります。 - スタイルを動的に適用したい場合は、Styled Componentsを使うのが良いでしょう。
const MyComponent = () => {
const [active, setActive] = useState(false);
const handleClick = () => {
setActive(true);
};
return (
<button
className={`my-button ${active ? 'active' : ''}`}
onClick={handleClick}
>
Click me
</button>
);
};
const MyComponent = () => {
const [active, setActive] = useState(false);
const handleClick = () => {
setActive(true);
};
const ref = useRef();
useEffect(() => {
const element = ref.current;
if (active) {
element.classList.add('active');
} else {
element.classList.remove('active');
}
}, [active]);
return (
<button
ref={ref}
onClick={handleClick}
>
Click me
</button>
);
};
import styled from 'styled-components';
const MyButton = styled.button`
&.active {
color: red;
}
`;
const MyComponent = () => {
const [active, setActive] = useState(false);
const handleClick = () => {
setActive(true);
};
return (
<MyButton
onClick={handleClick}
>
Click me
</MyButton>
);
};
動作確認
上記のコードをReactプロジェクトにコピーして、実行してみてください。
説明
- 最初のコードでは、
className属性にテンプレートリテラルを使用して、my-buttonクラスとactive状態に基づいてactiveクラスを動的に追加しています。
CSSとReactJSで手動クラス名に動的にクラスを追加する他の方法
const MyComponent = () => {
const [active, setActive] = useState(false);
const ref = useRef();
const handleClick = () => {
setActive(true);
};
useEffect(() => {
const element = ref.current;
if (active) {
element.classList.add('active');
} else {
element.classList.remove('active');
}
}, [active]);
return (
<button ref={ref} onClick={handleClick}>
Click me
</button>
);
};
この例では、refを使用してボタン要素への参照を取得し、useStateを使用してactive状態を追跡しています。active状態が変化したときに、useEffectフックを使用して、classList APIを使用して動的にクラスを追加または削除します。
useRefとuseCallbackを使う
const MyComponent = () => {
const [active, setActive] = useState(false);
const ref = useRef();
const handleClick = useCallback(() => {
setActive(true);
}, []);
useEffect(() => {
const element = ref.current;
if (active) {
element.classList.add('active');
} else {
element.classList.remove('active');
}
}, [active]);
return (
<button ref={ref} onClick={handleClick}>
Click me
</button>
);
};
この例では、useCallbackを使用して、handleClick関数を安定化しています。これにより、useEffectフックが不要になり、パフォーマンスが向上します。
第三者ライブラリを使う
classnamesなどのライブラリを使用して、クラス名を動的に管理することができます。
import classnames from 'classnames';
const MyComponent = () => {
const [active, setActive] = useState(false);
const handleClick = () => {
setActive(true);
};
return (
<button
className={classnames('my-button', {
active,
})}
onClick={handleClick}
>
Click me
</button>
);
};
- パフォーマンスが重要な場合は、
useRefとuseCallbackを使うのが良いでしょう。 - 複雑なケースでは、第三者ライブラリを使うのが便利です。
css reactjs
