在 React 中重用类组件答案

【问题标题】：ReUse of class component in react在 React 中重用类组件
【发布时间】：2023-01-31 20:54:15
【问题描述】：

我是 React 新手，在应用程序中我正在使用类组件工作

   class SummaryList extends React.Component {
        //code for the summarylist component here
    }

   class Summary extends React.Component {
    render() {
     return (
      <Switch>
   
       <Route path="/apply" component={Advance} />
       <Route path="/summary/edit/:id" component={EAdvance} />
       <Route path="/summary" component={SummaryList} />
    
     </Switch>
);
}
 }
 export default Summary;

我通过导入它并将组件用作摘要来在其他页面中使用此摘要... 现在这里的问题是我需要在其他地方使用 Summary 中存在的 SummaryList....当我再次尝试导入 Summay...通过将 as export {SummaryList} 放在第二位并首先尝试将其导入仅使用 Summary ....但它不起作用

如果我需要重用该组件我应该怎么做......我不能在我的应用程序中两次导入相同的组件

【问题讨论】：

标签： reactjs components reusability

【解决方案1】：

是的，您可以导出和导入不同的组件并多次渲染它。

例如：-

应用程序.js

import React, { Component } from 'react';
import Header from './Header';
import Main from './Main';

class App extends Component {
    render() {
        return (
            <div>
                <Header />
                <Main />
            </div>
        );
    }
}

export default App;

标题.js

import React, { Component } from 'react';
import Main from './Main';

class Header extends Component {
    render() {
        return (
            <header>
                <h1>Header Component</h1>
                <Main/>
            </header>
        );
    }
}

export default Header;

主.js

import React, { Component } from 'react';

class Main extends Component {
    render() {
        return (
            <main>
                <p>Main Component</p>
            </main>
        );
    }
}

export default Main;

这里Main在App.js和Header.js中呈现

【讨论】：