React:如何在一个页面中呈现两次组件？

import React from "react";

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        {/* 使用props */}
        <ChildComponent data={this.props.data1} />
        
        {/* 使用state */}
        <ChildComponent data={this.state.data2} />

        {/* 使用组件数组 */}
        {[
          <ChildComponent key="1" data={this.props.data1} />,
          <ChildComponent key="2" data={this.state.data2} />
        ]}

        {/* 使用条件渲染 */}
        {this.props.showComponent1 && <ChildComponent data={this.props.data1} />}
        {this.props.showComponent2 && <ChildComponent data={this.state.data2} />}
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return <div>{this.props.data}</div>;
  }
}

export default MyComponent;