javascript - React.js - 子コンポーネントに関数を実装して、同じ親から別の子をアンマウントし、その場所に別のコンポーネントをマウントする方法は?

Question

たとえば、次のようなコンポーネントです。

import React, { Component } from 'react';
import BodyContent from './BodyContent';
import BottomOne from './BottomOne';
import BottomTwo from './BottomTwo';
class App extends Component {
  render() {
    return (
      <div className="App">
        <BodyContent />
        <BottomOne />
      </div>
    );
  }
}

export default App;

BodyContentそのアンマウントBottomOneとマウントに関数を実装したいBottomTwoので、関数をアクティブにすると、コードは次のように再構築されます。

import React, { Component } from 'react';
import BodyContent from './BodyContent';
import BottomOne from './BottomOne';
import BottomTwo from './BottomTwo';
class App extends Component {
  render() {
    return (
      <div className="App">
        <BodyContent />
        <BottomTwo />
      </div>
    );
  }
}

export default App;

私は React に非常に慣れていないので、より良い方法があれば提案を受け付けていますが、その最終結果である BodyContent の unmounts と mounts の関数が本当に必要BottomOneですBottomTwo。