创建 gatsby-browser.js gatsby-ssr.js 的 DRY 版本

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>;
}

我想将此代码交给一个文件，然后将其导入两个文档，从而对其进行 DRY 处理，但我不确定执行此操作的最佳方法。谁能在这里提出最佳做法？

Answer 1

创建一个任意命名的文件（wrapPageElement.js 例如，original），内容如下：

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 的环境中具有不同的效果。

创建 gatsby-browser.js gatsby-ssr.js 的 DRY 版本

Creating a DRY version of gatsby-browser.js gatsby-ssr.js

javascript

reactjs

gatsby