reactjs - 4 番目のコンポーネントがレンダリングされない理由

Question

ひどいインデントで申し訳ありませんが、コンポーネント レンダリングに関する 4 番目でないのはなぜですか。コンポーネントについて別のファイルに書き込もうとしても、すべてを試しましたが、結果は同じです。3番目のクラスのコンポーネントは約であり、正常にレンダリングされるコンポーネントのようApp.jsにエクスポートおよびインポートしました。index.jsRcomp1

App.js

import React, { Component } from 'react';

import 'font-awesome/css/font-awesome.min.css';
import { ProgressBar } from 'react-bootstrap';


import './App.css';
//everything css

var ele;
var col;
var f;

class App extends Component {
  constructor(props) {
    super(props);
    ele = this.props.imgUrl;
    col = this.props.colour;
  }

  render() {
    console.log(ele);
    var font = {
      fontFamily: "Times New Roman"
    }

    var divStyle = {
      backgroundColor: col,
      height: 390
    };

    var divs = {
      height: 390,
      backgroundColor: col
    };

    var newde = {
      backgroundImage: `url(${ele})`,
      height: 390
    };

    return (
      <div className="App">
        <div className="container-fluid">
          <div className="row" style={divs} >
            <div className="col-xs-6 " style={divStyle} >
              <div className='padding' style={newde}></div>
            </div>
            <div className="col-xs-6 Back">
              <p className="font">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

var c;

class Rcomp1 extends Component {
  constructor(props) {

    super(props);
    f = this.props.fa;
    c = this.props.colour;
  }

  render() {
    var tyle = {
      backgroundColor: this.props.bg,
      height: 360,
      color: c
    };

    return (
      <div>
        <div className='container-fluid'>
          <div className='row' style={{ height: 360 }}>
            <div className='col-xs-8 ' style={tyle}>
              <div className='marg marg3'>
                <p className='font2'><strong>Information about my skills.</strong></p>
                <p className='font2'><strong>{this.props.skill1}</strong></p>
                <ProgressBar className="wid" bsStyle="success" now={this.props.ski1} />
                <p className='font2'><strong>{this.props.skill2}</strong></p>
                <ProgressBar className="wid" bsStyle="success" now={this.props.ski2} />
                <p className='font2'><strong>{this.props.skill3}</strong></p>
                <ProgressBar className="wid" bsStyle="success" now={this.props.ski3} />
              </div>
            </div>
            <div className='col-xs-4' style={{ backgroundColor: this.props.bg, height: 360 }}>
              <div className='marg2  marg4' style={{ backgroundColor: this.props.bg }}>
                <i className={" fa fa-5x " + " " + f + " fs text-primary"} style={{ backgroundColor: this.props.bg }}></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

class about extends Component {
  render() {
    return (
      <div className='container-fluid'>
        hellow world
            <div className='col-xs-4'>
          Hello
            </div>
        <div className='col-xs-5'>
          World
            </div>
      </div>
    );
  }
}

export default App;
export { Rcomp1 };
export { about };

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Rcomp1 } from './App';
import { about } from './App';
import './index.css';
import r from './r.jpeg';
import { Navbar } from 'react-bootstrap';
import { NavbarHeader } from 'react-bootstrap';
import { DropdownButton } from 'react-bootstrap';
import { NavbarBrand } from 'react-bootstrap';
import { MenuItem } from 'react-bootstrap';
import { NavBarToggle } from 'react-bootstrap';
import { Nav } from 'react-bootstrap';
import { NavDropdown } from 'react-bootstrap';
import { NavItem } from 'react-bootstrap';

import 'font-awesome/css/font-awesome.min.css';

ReactDOM.render(
  <div><App imgUrl="https://www.hrii.tk/skate.webp" colour="#FA9F1B" />
    <Rcomp1 fa={"fa-linkedin"} colour={'#FFFFFF'} bg={'#263238'} skill1={'GITHUB'} ski1={25} skill2={'HTML5'} ski2={50} skill3={'BOOTSTRAP'} ski3={30} />
    <App imgUrl="https://www.hrii.tk/tri1.webp" colour='#3E384F' />
    <Rcomp1 fa={"fa-github-square"} colour={"#FFFFFF"} bg={'black'} skill1={'C/C++'} ski1={85} skill2={'PYTHON'} ski2={70} skill3={'JQUERY'} ski3={40} />
    <about />
  </div>,
  document.getElementById('root')
);

ReactDOM.render(
  <div style={{ backgroundColor: '#F99F1C' }}>
    <Navbar inverse collapseOnSelect className='fon'>
      <Navbar.Header>
        <Navbar.Brand>
          <a href="#brand" className='fon fon2'>Hrii.tk</a>
        </Navbar.Brand>
        <Navbar.Toggle />
      </Navbar.Header>
      <Navbar.Collapse>
        <Nav>
          <NavItem eventKey={1} href="#">
            Link
            </NavItem>
          <NavItem eventKey={2} href="#">
            Link
            </NavItem>
          <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
            <MenuItem eventKey={3.1}>Action</MenuItem>
            <MenuItem eventKey={3.2}>Another action</MenuItem>
            <MenuItem eventKey={3.3}>Something else here</MenuItem>
            <MenuItem divider />
            <MenuItem eventKey={3.3}>Separated link</MenuItem>
          </NavDropdown>
        </Nav>
        <Nav pullRight>
          <NavItem eventKey={1} href="#">
            Link Right
            </NavItem>
          <NavItem eventKey={2} href="#">
            Link Right
            </NavItem>
        </Nav>
      </Navbar.Collapse>
    </Navbar>;
  </div>,
  document.getElementById('navbar')
);