React 子組件不渲染

Question

我是新手，目前正在嘗試渲染一些組件。 我的問題是只有父組件被渲染。 我也有子組件，但反應似乎沒有識別它們？

這是我導入 App 組件的索引。

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

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

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

這是我的 App 組件。

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

我的 App Component 唯一呈現的是 Container Component 而不是 TopInfo。 如果我刪除了 Container 組件並且只有 TopInfo，React 將呈現 TopInfo。

Answer 1

請參閱React 兒童。

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