Почему не работает код на React?

Question

[Михаил Литвинов]

Всем привет!
Начали осваивать React и почти сразу появился вопрос:
есть два файла - Header.jsx и Submenu.jsx.
в header.jsx есть контейнер <div id="modalMenu"></div>, в submenu, собственно, есть контейнер <div id="submenuContainer"></div>.

в чем, собственно, вопрос: я хочу задать стиль контейнеру саб-меню:

<div id="submenuContainer" style={{marginLeft: document.getElementById("modalMenu").scrollWidth}}></div>

Почему оно не работает и как это исправить? Оба файла загружаются в app.jsx, вот код:

app.jsx:

import React from "react";
import Header from "./app/Header/Header";
import "./App.stylesheet.css";
import "./App.main.css";
import Submenu from "./app/Submenu/Submenu";
import Product from "./app/Modules/Product/Product"
import Loading from "./app/Loading/Loading"

class App extends React.Component {
    render() {
        return (
            <div>
                <header>
                    <Header />
                </header>
                <main id="content">
                    <Submenu />
                    <Product />
                </main>
            </div>
            // <Loading />
        );
    }
}

export default App;

header.jsx:

import React from "react";
import Menu from "./Menu/Menu";
import Logo from "./Logo/Logo";
import Controls from "./Controls/Controls";
import MenuContainer from "./Menu/MenuContainer";

class Header extends React.Component {
    render() {
        return (
            <div className="header-container" id="headerContainer">
                <div className="flex-row">
                    <div className="col-1-3"><Menu /></div>
                    <div className="col-1-3"><Logo /></div>
                    <div className="col-1-3"><Controls /></div>
                </div>
                <div className="modal-menu" id="modalMenu"><MenuContainer/></div>
            </div>
        );
    }
}

export default Header;

submenu.jsx:

import React from "react";
import Statistic from "./Sub-pages/Statistic";
import Products from "./Sub-pages/Products";
import Articles from "./Sub-pages/Articles";
import Sales from "./Sub-pages/Sales";
import Mediafiles from "./Sub-pages/Mediafiles";
import Delivery from "./Sub-pages/Delivery";
import Partners from "./Sub-pages/Partners";
import Suppliers from "./Sub-pages/Suppliers";
import Purchases from "./Sub-pages/Purchases"

class Submenu extends React.Component {
    render() {
        return (
            <div className="submenu" id="submenuContainer" style={{marginLeft: document.getElementById("modalMenu").scrollWidth}}>
                {/* <Statistic /> */}
                {/* <Products /> */}
                {/* <Articles /> */}
                {/* <Sales /> */}
                {/* <Mediafiles /> */}
                {/* <Delivery /> */}
                {/* <Partners /> */}
                {/* <Suppliers /> */}
                {/* <Purchases /> */}
            </div>            
        );
    }
}

export default Submenu;

Очень прошу не кидаться в меня тапками, очень хочу разобраться, как с этим работать. Спасибо!

Answer 1

[Kirill Makarov]

В реакте не используют id, там есть своё реакт дом дерево, поэтому про id тут нужно забыть. Теперь что касается функционала, нужно изучить что такое пропсы, и прокидывать с помощью них. Либо если компоненты имеют большую цепочку, и нужно много прокидывать использовать redux mobx useState на выбор

Answer 2

[n1ksON]

Что вы за стиль пытаетесь задать? Если уж задаёте настолько максимально странный отступ, то пишите так:

<div id="submenuContainer" style={{marginLeft: {`${document.getElementById("modalMenu").scrollWidth}px`}}}></div>

Если только начинаете осваивать React, переходите сразу к изучению функциональных компонент, а не классовых.

React не рекомендует обращение к dom, то есть рекомендует не использовать вызовы document.
Лучше найти более адекватный вариант, чтобы задать отступ.

Comments

[Михаил Литвинов]

там нужен отступ по ширине меню, а ширина меню адаптивная, не заданная в величинах, так что пытаюсь вытащить его ширину и сделать это отступом...