I defined the class Header
in the header.tsx
file and put it in the BizComponent
namespace.
The footer.tsx
file defines the class Footer
and is also placed in this namespace.
How do I import this namespace so that it contains both classes?
Thank you in advance for your answer.
UPDATE:
header.tsx
:
import React from 'react';
export namespace BizComponent {
export class Header extends React.Component {
render(): React.ReactNode {
return (<nav className='header-nav'>
<a className='left' href='/'>
<img className='header-logo' src='/logo.png' aria-label='logo' />
</a>
<div className='right'>
<a href='/article'>Article</a>
<a href='/about'>About</a>
</div>
</nav>);
}
}
}
export default BizComponent.Header;
footer.tsx
:
import React from 'react';
namespace BizComponent {
export class Footer extends React.Component {
render(): React.ReactNode {
return (<div>
<p className='footer'>
Copyright © 2022 (example). All rights reserved.
</p>
</div>);
}
}
}
export default BizComponent.Footer;
then import them...
import { BizComponent } from './header.tsx';
// ERROR: TS 2300
// import { BizComponent } from './footer.tsx';
I'm looking for a way to replace this bad design...
You have to import them separately using their relative file paths.
One way to accomplish something similar is given in Importing a directory in React