Как повесить класс через портал по клику?

Question

[AndreyKiyah]

import React, { Component } from 'react';
import {NavLink, Link} from 'react-router-dom';
import logo from '../images/logo_dark.svg';

export default class MainHeader extends Component {
    constructor(props) {
        super(props)
        this.state = {
            menuOpen: false,
        }
        this.openMenu = this.openMenu.bind(this)
    };

    openMenu () {
        this.setState({ menuOpen: !this.state.menuOpen})
    };
    render() {

        let data = {
            work: "Работаем: ПН-СБy",
            schedule: "9.00-19.00",
            supportEmail: "support.com",
            links: {
                office: {
                    href: '/office',
                    caption: 'В кабинет',
                    target: 'false'
                },
                registration: {
                    href: '/registration/register',
                    caption: "Зарегистрироваться",
                    target: 'false'
                }
            },
            ...this.props
        };
        console.log('data', data)

        const clsMenu = [ "nav-default"]
        const clsHamb = [ "hamburger", "hamburger--spin"]

        if (this.state.menuOpen) {
            clsHamb.push('is-active');
            clsMenu.push('is-active');
            document.body.classList.add('nav_open')
        } else {
            document.body.classList.remove('nav_open')
        }
        return (
            <header className="store-header header-default">
                <div className="container-fluid">
                    <div className="header-default-box">
                        <Link key="anchLogo" to="/" className="store-header__logo"></Link>
                        <div className={ clsHamb.join(' ')} onClick={this.openMenu.bind(this)} >
                            <div className="hamburger-box">
                                <div className="hamburger-inner"></div>
                            </div>
                        </div>
                        <div className="header-default-support">
                            <span className="store-header__work">{data.work}<span>{data.schedule} </span></span>
                            <span className="store-header__support">
                            <a href={"mailto:" + data.supportEmail} >{data.supportEmail}</a>
                        </span>
                        </div>
                        <nav className={ clsMenu.join(' ')}>
                            <ul className="nav-default-list">
                                {
                                    Object.values(data.links).map(({ href, caption,target }) => (
                                        <li> <NavLink to={href} target={ target ? "_blank" : "_self" }>{caption}</NavLink></li>
                                    ))
                                }
                            </ul>
                        </nav>
                        { this.state.menuOpen ? <div className="Backdrop" onClick={this.openMenu.bind(this)}></div> : null }
                    </div>
                </div>
            </header>
        );
    }
}

как пробросить через портал по клику класс на боди когда меню открывается ?

Comments

[Сергей Сунцев]

Прошу прощения, а где у вас портал?

[AndreyKiyah]

Сергей Сунцев, У меня его нет, но в боди есть modal-root, я просто не могу понять мижанику построения портала?
Он позволяет владывать только в модал рут или управлять классами в дом дереве ?

[Сергей Сунцев]

AndreyKiyah, Механика портала довольно простая, он рендерит компоненты, которые находятся вне DOM-иерархии родительского компонента.

Т.е. по умолчанию у нас есть некий <div id="root"></div>в который мы помещаем всю реакт логику
А с порталом мы можем , в другой, к примеру <div id="select-ortions"></div>отправить какой то компонент.

А управлять классами в html dom дереве позволяет javascript тут не реакт, не портылы не нужны.

[AndreyKiyah]

Сергей Сунцев, на занятиях сказали что прокидывать класс в не компонета не ок и для этого есть порталы, сказали что бы разабрался с ними но я понять не могу, как это можнос делать , я вроде и так на js написал что пракидуется класс , но сказали что не очень((

[Сергей Сунцев]

Вы что то не так поняли, либо вам что то не так сказали.
Поробуйте в офф документации поразбираться.
Самому порешать, и поразибраться в примерах будет правильно.

Answer 1

[Антон Спирин]

Не надо никаких порталов.

document.body.classList.add('no-scroll');