Is there a good way to put components inside components?
I want to have something like this: <TemplateA> <h1>Main content</h1> </TemplateA>
But templateA would be defined as something like this: <Primarycontainer> <Primarynavigation /> <Primarycontent> <Leftcontentcolumn> {children} </Leftcontentcolumn> <Rightsidebar /> </Primarycontent> <Footer /> </Primarycontainer>
I can’t import various components into another component in the same way as I’ve imported them into a pages file. Meaning I can’t have a components of components file, or a nested components file.
Hi,
I’m not sure I understand what do you mean by not being able to have “components of components file, or a nested components file.”.
You can (inside the file that contains your Template component) import other components if needed, you could then render them as child components, something like this:
...
import Primarycontainer from './Primarycontainer';
import Primarynavigation from './Primarynavigation';
import Primarycontent from './Primarycontent';
...
class TemplateA extends React.Component {
...
render () {
return (
<div id='templateA'>
<Primarycontainer />
<Primarynavigation />
<Primarycontent />
</div>
);
}
}