react 两个页面共用一个组件

在React中，组件是构建用户界面的基本单元。如果两个页面需要共用同一个组件，可以通过以下步骤实现：

1. **创建通用组件**：首先，创建一个React组件，这个组件将包含两个页面共享的UI部分和逻辑。

2. **导出组件**：在组件文件中使用`export`语句导出这个通用组件，使其可以在其他文件中被引入和使用。

   // CommonComponent.jsx
   import React from 'react';

   function CommonComponent(props) {
       // 组件的逻辑和样式
       return (
           <div>
               {/* UI部分 */}
           </div>
       );
   }

   export default CommonComponent;

3. **在不同页面中引入组件**：在两个不同的页面组件中，使用`import`语句引入刚才创建并导出的通用组件。

   // PageOne.jsx
   import React from 'react';
   import CommonComponent from './CommonComponent';

   function PageOne() {
       return (
           <div>
               <h1>页面一</h1>
               <CommonComponent />
           </div>
       );
   }

   export default PageOne;

   // PageTwo.jsx
   import React from 'react';
   import CommonComponent from './CommonComponent';

   function PageTwo() {
       return (
           <div>
               <h1>页面二</h1>
               <CommonComponent customProp="some value" />
           </div>
       );
   }

   export default PageTwo;

4. **使用props传递数据**：如果需要，可以在使用通用组件的地方通过props传递不同的数据，以适应不同的页面需求。

通过以上步骤，你可以在React应用中实现两个页面共用同一个组件。这样不仅可以减少代码重复，还可以使得组件更加模块化，便于维护和管理。