如何在React/jsx中显示三元组中真实的组件和变量？

import React from 'react';

class MyComponent extends React.Component {
  render() {
    const condition = true;
    const trueComponent = <TrueComponent />;
    const falseComponent = <FalseComponent />;
    const variable = 'Hello, World!';

    return (
      <div>
        {condition ? trueComponent : falseComponent}
        {condition && <span>{variable}</span>}
      </div>
    );
  }
}

class TrueComponent extends React.Component {
  render() {
    return <h1>This is the true component.</h1>;
  }
}

class FalseComponent extends React.Component {
  render() {
    return <h1>This is the false component.</h1>;
  }
}

export default MyComponent;