Блог

Я новичок в react и в настоящее время пытаюсь отобразить некоторые компоненты. Моя проблема в том, что отображается только родительский компонент. У меня также есть дочерние компоненты, но react, похоже, не распознает их?

Это мой индекс, в который я импортирую свой компонент приложения.

 import ReactDom from 'react-dom';
import React from 'react';
import App from './app';

function BuildApp() {
  return (
    <App />
  );
}

ReactDom.render(<BuildApp />, document.body);
 

Вот мой компонент приложения.

 import React from 'react';
import Container from './components/bootstrap-components/Container';
import TopInfo from './components/TopInfo/TopInfo';

export default function App() {
  return (
      <Container>
        <TopInfo />
      </Container>
  );
}
 

Единственное, что отображает мой компонент приложения, — это компонент контейнера, а не TopInfo.
Если я удалю компонент контейнера и у меня будет только TopInfo, React отобразит TopInfo.

Обратитесь к дочерним компонентам React.

 function Container(props) {
   return (
     <div>
       {props.chilidren}
     </div>
   );
}