Не отображаються дочерние блоки в React?

Question

[mashincode]

С таким кодом и рендерингом метода App() в итоге на страничке отображается только div c классом page, без каких либо дочерних элементов :(( Что пошло не так?

import React from "react";
import ReactDOM from "react-dom";
import { FlowChartWithState } from "@mrblenny/react-flow-chart";
//import { INode, REACT_FLOW_CHART } from "@mrblenny/react-flow-chart";
import "./styles.css";

import chartSimple from './constants'
//import PropTypes from 'prop-types';

const Content = () => {
    return(
        <div className="Content"></div>
    )
}

const Message = () => {
    return(
        <div className="Message"></div>
    )
}

const Page = () => {
    return(
        <div className="Page"></div>
    )
}

const Sidebar = () => {
    return(
        <div className="Sidebar"></div>
    )
}

const Outer = () => {
    return(
        <div className="Outer"> Test2 </div>
    )
}

const SidebarItem = (props) => {
  return (
    <Outer
      draggable={true}
      onDragStart={ (event) => {
        console.log('123')
        // event.dataTransfer.setData(REACT_FLOW_CHART, JSON.stringify({props.type} , {props.ports}, {props.properties} ))
      } }
    >
      {props.type}
    </Outer>
  )
}

function App() {
  return (
    <Page>
    <Content>
      <FlowChartWithState initialValue={chartSimple} />
    </Content>
    <Sidebar>
      <Message>
        Drag and drop these items onto the canvas.
      </Message>
      <SidebarItem
        type="top/bottom"
        ports={ {
          port1: {
            id: 'port1',
            type: 'top',
            properties: {
              custom: 'property',
            },
          },
          port2: {
            id: 'port1',
            type: 'bottom',
            properties: {
              custom: 'property',
            },
          },
        } }
        properties={ {
          custom: 'property',
        }}
      />
      <SidebarItem
        type="bottom-only"
        ports={ {
          port1: {
            id: 'port1',
            type: 'bottom',
            properties: {
              custom: 'property',
            },
          },
        }}
      />
      <SidebarItem
        type="left-right"
        ports={ {
          port1: {
            id: 'port1',
            type: 'left',
            properties: {
              custom: 'property',
            },
          },
          port2: {
            id: 'port2',
            type: 'right',
            properties: {
              custom: 'property',
            },
          },
        }}
      />
      <SidebarItem
        type="all-sides"
        ports={ {
          port1: {
            id: 'port1',
            type: 'left',

          },
          port2: {
            id: 'port2',
            type: 'right',
          },
          port3: {
            id: 'port3',
            type: 'top',
          },
          port4: {
            id: 'port4',
            type: 'bottom',
          },
        }}
      />
      <SidebarItem
        type="lots-of-ports"
        ports={ {
          port1: {
            id: 'port1',
            type: 'left',

          },
          port2: {
            id: 'port2',
            type: 'right',
          },
          port3: {
            id: 'port3',
            type: 'top',
          },
          port4: {
            id: 'port4',
            type: 'bottom',
          },
          port5: {
            id: 'port5',
            type: 'left',
          },
          port6: {
            id: 'port6',
            type: 'right',
          },
          port7: {
            id: 'port7',
            type: 'top',
          },
          port8: {
            id: 'port8',
            type: 'bottom',
          },
          port9: {
            id: 'port9',
            type: 'left',
          },
          port10: {
            id: 'port10',
            type: 'right',
          },
          port11: {
            id: 'port11',
            type: 'top',
          },
          port12: {
            id: 'port12',
            type: 'bottom',
          },
        }}
      />
    </Sidebar>
  </Page>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

[hzzzzl]

const Page = () => {
    return(
        <div className="Page"></div>
    )
}

это и есть пустой див

const Page = (props) => {
    return(
        <div className="Page">{props.children}</div>
    )
}

^ а вот так в див обернуть всё, что прописано в родительском компоненте внутри Page

Comments

[mashincode]

Понял вас, большое спасибо, начинаю врубраться, подскажите как гуглить эту тему, конкретно по этому вопросу в доке, я не требую глубокого понимания, пытаюсь закончить mvp версию до появления нормальных react разработчиков в команде, буду очень признателен :)

[hzzzzl]

mashincode, ну вообще документация очень хорошая и подробная, вот конкретно про props.children
https://ru.reactjs.org/docs/composition-vs-inherit...

Некоторые компоненты не знают своих потомков заранее. Это особенно характерно для таких компонентов, как Sidebar или Dialog, которые представляют из себя как бы «коробку», в которую можно что-то положить.
..........

[mashincode]

hzzzzl, еще раз спасибо, теперь стало еще понятнее)