如何将代码从App.js分解到组件

import React from 'react';

class Component extends React.Component {
  render() {
    // 组件的渲染逻辑
    return (
      <div>
        {/* 组件的内容 */}
      </div>
    );
  }
}

export default Component;

import React from 'react';

class Component extends React.Component {
  render() {
    const { prop1, prop2 } = this.props; // 假设需要传递两个属性 prop1 和 prop2
    // 组件的渲染逻辑
    return (
      <div>
        {/* 组件的内容 */}
        <p>{prop1}</p>
        <p>{prop2}</p>
        {/* 其他需要分解的代码 */}
      </div>
    );
  }
}

export default Component;

import React from 'react';
import Component from './Component'; // 假设组件文件位于同一目录下

class App extends React.Component {
  render() {
    return (
      <div>
        {/* 其他代码 */}
        <Component prop1="Value 1" prop2="Value 2" />
        {/* 其他代码 */}
      </div>
    );
  }
}

export default App;