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

【问题标题】：Creating a DRY version of gatsby-browser.js gatsby-ssr.js创建 gatsby-browser.js 的 DRY 版本 gatsby-ssr.js
【发布时间】：2021-03-18 23:34:49
【问题描述】：

在我的构建中，我有两个具有相同代码的文件：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 处理，但我对执行此操作的最佳方式有点不确定。任何人都可以在这里提出最佳做法吗？

【问题讨论】：

标签： javascript reactjs gatsby

【解决方案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 的环境中具有不同的效果。

【讨论】：

您也可以在适当的时候使用export { default as wrapPageElement } from "./wrapPageElement" 以获得更简洁的方法。
是的，这两个文件可能需要分歧。不过，我今天学到了一些东西，很可能我不需要用这个来更改这些文件中的任何一个 :-) 谢谢！