리액트를 사용하여 HTML 태그에 클래스를 추가하시겠습니까?

리액트를 사용하여 HTML 태그에 클래스를 추가하시겠습니까?

저는 리액트 프로젝트에서 모달(modal)을 만들고 있습니다.모달(modal)을 열었을 때 클래스를 추가하고 닫았을 때 클래스를 제거해야 합니다.

클래스를 추가/삭제하는 바닐라 자바스크립트를 실행함으로써 이전 jQuery 방식으로 이것을 수행할 수 있지만, 이것은 일반적인 리액트 철학처럼 느껴지지 않습니다.

대신 최상위 컴포넌트에 setState를 설정하여 모달의 오픈 또는 클로즈 여부를 표시해야 합니까?이렇게 해도 페이지의 div에 들어가 버리기 때문에 본문 요소를 편집하는 것은 아직 부작용입니다만, 이 추가 배선에는 이점이 있습니까?

TL;DR사용하다document.body.classList.add그리고.document.body.classList.remove

외부 컴포넌트 내의 모달 표시/숨김 상태를 전환하기 위한 두 가지 기능이 있습니다.

이러한 기능에서는,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 });
}

새로운 React(16.8)를 사용하면 다음과 같은 훅으로 문제를 해결할 수 있습니다.

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>
    );
};

사실 개폐에는 2가지 기능이 필요 없습니다.document.body.classList.toggle

const [isOpen, setIsOpen] = useState(false)
useEffect(() => {
  document.body.classList.toggle('modal-open', isOpen);
},[isOpen])
    
<button onCLick={()=> setIsOpen(!isOpen)}>Toggle Modal</button>

@brian이 언급한 것처럼 다른 컴포넌트를 감싸는 최상위 컨테이너 컴포넌트를 사용해 보십시오.(어플리케이션에서 redux를 사용하지 않는 경우)

이 최상위 컴포넌트에서는,

1. 부울 상태를 추가합니다(예: modalOpen)를 사용하여 CSS 클래스를 전환합니다.
2. 메서드를 추가합니다(예: handleOpenModal&handleCloseModal부울 상태를 변경합니다.
3. 위에서 작성한 메서드를 소품으로 사용하여<Modal />요소

React JS에는 공식 React Modal 컴포넌트가 있습니다.이 컴포넌트는 https://github.com/reactjs/react-modal 입니다.

언급URL : https://stackoverflow.com/questions/47706903/add-a-class-to-the-html-body-tag-with-react