【MUI】動作がおかしい時に試してみること

こんにちは、フリーランスエンジニアの太田雅昭です。

MUIの動作がおかしい

MUIに限った話ではないのかもしれませんが、検証する時間がないためMUIで話をさせていただきます。

例えば以下のようなコンポーネントを作成したとします。

const handleChange = async (e: React.ChangeEvent<{ name?: string; value: unknown }>) => {
    const name = e.target.name;
    let value = e.target.value;
    if (e.target instanceof HTMLInputElement && e.target.type == "checkbox") {
        value = e.target.checked;
    }
    setSettings({ ...settings, [name as string]: value });
}

const MySwitch = (prop: { label: string, name: keyof LiveSettings }) => {
    const { label, name, ...rest } = prop;
    return <FormControlLabel label={label} control={
        <Switch name={name} key={name} checked={settings[name] ? true : false} disabled={submitting || loading}
            onChange={handleChange} {...rest} />}
    />
}

これを２通りの方法で使用します。

{MySwitch({ label: "停止 / 実行", name: "active" })}
<MySwitch label="非公開 / 公開" name="public" />

そう、お分かりのように、この言い方で合っているか分からず恐縮ですが、JSXで呼び出すか、関数で呼び出すかの違いとなっています。

関数で呼び出す時は正常に動作するのですが、JSXで呼び出す時はアニメーションが効きません。

どうするか

とりあえず関数で呼び出しておけば間違いはないのかなと思います。

ではでは。