问题
I am building a Gatsby site. The site consists of multiple React "page-components", all of which get wrapped in a React header component and a React footer component.
I have some pre-existing static HTML (think things like Privacy Policy &c). I was planning to just publish them in the /public gatsby folder. But then the won't have the React header component and footer component.
How can I publish my static HTML content AND give them the React header/footer?
I imagine that if I "translate" my static HTML to JSX then of course that would work. Just want to understand if that is the only way, the right way, or whether there is an easier way?
回答1:
You can add the header/footer components into src/layouts/index.js while the page content will be rendered through the <div>{children()}</div> based on the pages you add to src/pages
回答2:
Gatsby will create the static public files for you at build time (I recommend Netlify). You 'should' be creating react components which means using JSX, either in the pages folder or the components folder. The header is actually already part of the layouts folder so you don't have to do anything on that count.
Based on what I am understanding, if you just create new page files or modify the existing page files to display your content you will get the behaviour you're after. Then it's just a matter of customizing things i.e. the pages and the header content and styles, to your liking.
来源：https://stackoverflow.com/questions/50943433/gatsby-how-to-share-react-header-between-react-components-and-previously-generat