创建gatsby-browser.js的干燥版本gatsby-ssr.js

Question

在我的构建中，我有两个具有相同代码的文件：gatsby-browser.js和gatsby-ssr.js。代码非常简单，它使用wrapPageElement在<Layout />组件中包装页面：

// gatsby-browser.js  gatsby-ssr.js

import React from 'react';
import Layout from './src/components/Layout';

export function wrapPageElement({ element, props }) {
  return <Layout {...props}>{element}</Layout>;
}

我想将这段代码交给一个文件，然后将其导入到两个文档中，从而对它进行干式处理，但我有点不确定这样做的最佳方式。这里有没有人能推荐一个最佳实践呢？

Answer 1

创建一个名为任意名称的文件(例如，wrapPageElement.js)，其中包含以下内容：

const wrapPageElement = ({ element, props }) => {
   return <Layout {...props}>{element}</Layout>;
}
export default wrapPageElement

现在，在您的gatsby-ssr.js和gatsby-browser.js中

import customWrapPageElement from './wrapPageElement' 

export const wrapPageElement = customWrapPageElement

请记住，您可以在某些情况下使用DRY，因为这两个文件具有相同的内容，但它应该是这样的，因为这两个实例在Gatsby的环境中具有不同的效果。