web-dev-qa-db-ja.com

Reactを使用してHTML <body>タグにクラスを追加しますか？

Reactプロジェクトでモーダルを作成しています。モーダルが開いている場合はボディにクラスを追加し、閉じている場合は削除する必要があります。

クラスを追加/削除するVanilla javascriptを実行することで、これを古いjQueryの方法で実行できましたが、これは通常のReact哲学のようには感じません。

代わりに、トップレベルコンポーネントでsetStateを使用して、モーダルが開いているか閉じているかを示す必要がありますか？これを行ったとしても、ページのdivにレンダリングされるため、まだbody要素を編集する副作用があるので、この余分な配線には利点がありますか？

html5reactjsclassname
23
Evanss

TL; DRuse document.body.classList.addおよびdocument.body.classList.remove

状態の一部を切り替えて、外部コンポーネント内のモーダルを表示/非表示にする2つの関数があります。

これらの関数内では、document.body.classList.addメソッドとdocument.body.classList.removeメソッドを使用して、以下のようにモーダルの状態に依存するボディクラスを操作します。

openModal = (event) => {
  document.body.classList.add('modal-open');
  this.setState({ showModal: true });
}
hideModal = (event) => {
  document.body.classList.remove('modal-open');
  this.setState({ showModal: false });
}
30
Sam Logan

新しいReact（16.8）では、これは hooks で解決できます：

import {useEffect} from 'react';

const addBodyClass = className => document.body.classList.add(className);
const removeBodyClass = className => document.body.classList.remove(className);

export default function useBodyClass(className) {
    useEffect(
        () => {
            // Set up
            className instanceof Array ? className.map(addBodyClass) : addBodyClass(className);

            // Clean up
            return () => {
                className instanceof Array
                    ? className.map(removeBodyClass)
                    : removeBodyClass(className);
            };
        },
        [className]
    );
}

次に、コンポーネントで

export const Sidebar = ({position = 'left', children}) => {
    useBodyClass(`page--sidebar-${position}`);
    return (
        <aside className="...">
            {children}
        </aside>
    );
};
8
Lukas Kral

@brianが述べたように、他のコンポーネントをラップするトップレベルのコンテナコンポーネントを試してください。 （アプリでreduxを使用していない場合）

この最上位コンポーネントでは：

  1. ブール状態（例：modalOpen）を追加して、CSSクラスを切り替えます
  2. ブール状態を変更するメソッド（例：handleOpenModal＆handleCloseModal）を追加します。
  3. 上記で作成したメソッドを小道具として<Modal />コンポーネントに渡します
0
JustinToh

ReactJSには公式のReactモーダルコンポーネントがあり、それを使用するだけです。 https://github.com/reactjs/react-modal

0
swyx